刷前端面經筆記（三）

1.var的變量提高的底層原理是什麼？

JS引擎的工做方式是
1)先解析代碼，獲取全部被聲明的變量；
2)而後再執行。
也就是分爲預處理和執行這兩個階段。
變量提高：全部用var聲明變量的語句都會被提高到代碼頭部。另外function也可看做變量聲明，也存在變量提高的狀況。

2.垂直水平居中的方式？

1)定位
父元素設置爲：position: relative;
子元素設置爲：position: absolute;
距上50%，據左50%，而後減去元素自身寬度的距離就能夠實現

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;

2)flex佈局

display: flex; //flex佈局
justify-content: center; //使子項目水平居中
align-items: center; //使子項目垂直居中

3)tabel-cell

display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水平居中

3.如何判斷一個對象是否爲數組

1) Array.prototype.isPrototypeOf(obj)方法，斷定Array是否是在obj的原型鏈中，若是是，則返回true,不然false;
2) obj instanceof Array;
3) Object.prototype.toString.call(obj)；(==="[object Array]")
4) Array.isArray(obj);

4.行內元素和塊級元素有哪些？img屬於什麼元素？

塊元素(block element)
　　* address - 地址
　　* blockquote - 塊引用
　　* center - 舉中對齊塊
　　* dir - 目錄列表
　　* div - 經常使用塊級容易，也是css layout的主要標籤
　　* dl - 定義列表
　　* fieldset - form控制組
　　* form - 交互表單
　　* h1 - 大標題
　　* h2 - 副標題
　　* h3 - 3級標題
　　* h4 - 4級標題
　　* h5 - 5級標題
　　* h6 - 6級標題
　　* hr - 水平分隔線
　　* isindex - input prompt
　　* menu - 菜單列表
　　* noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
　　* noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容）
　　* ol - 排序表單
　　* p - 段落
　　* pre - 格式化文本
　　* table - 表格
　　* ul - 非排序列表

內聯元素(inline element)

　　* a - 錨點
　　* abbr - 縮寫
　　* acronym - 首字
　　* b - 粗體(不推薦)
　　* bdo - bidi override
　　* big - 大字體
　　* br - 換行
　　* cite - 引用
　　* code - 計算機代碼(在引用源碼的時候須要)
　　* dfn - 定義字段
　　* em - 強調
　　* font - 字體設定(不推薦)
　　* i - 斜體
　　* img - 圖片
　　* input - 輸入框
　　* kbd - 定義鍵盤文本
　　* label - 表格標籤
　　* q - 短引用
　　* s - 中劃線(不推薦)
　　* samp - 定義範例計算機代碼
　　* select - 項目選擇
　　* small - 小字體文本
　　* span - 經常使用內聯容器，定義文本內區塊
　　* strike - 中劃線
　　* strong - 粗體強調
　　* sub - 下標
　　* sup - 上標
　　* textarea - 多行文本輸入框
　　* tt - 電傳文本
　　* u - 下劃線
　　* var - 定義變量
可變元素
　　可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。
　　* applet - java applet
　　* button - 按鈕
　　* del - 刪除文本
　　* iframe - inline frame
　　* ins - 插入的文本
　　* map - 圖片區塊(map)
　　* object - object對象
　　* script - 客戶端腳本

img、input屬於行內替換元素。height/width/padding/margin都可用。效果等於塊元素。

5.margin塌陷？

當兩個盒子在垂直方向上設置margin值時，會出現塌陷現象
解決方法：

1.給父盒子添加border
2.給父盒子添加padding-top
3.給父盒子添加overflow:hidden
4.父盒子:position:fixed
5.父盒子:display:table
6.給子元素的前面添加一個兄弟元素
  屬性爲:content:"";
  overflow:hidden;

解決方法的主要原理就是設置盒子爲BFC
BFC爲頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。

6.僞類與僞元素的區別

1）僞類
僞類用於選擇DOM樹以外的信息，或是不能用簡單選擇器進行表示的信息。前者包含那些匹配指定狀態的元素，好比:link，:visited，:hover，:active；後者包含那些知足必定邏輯條件的DOM樹中的元素，好比:first-child，:first-of-type，：target。
2）僞元素
僞元素爲DOM樹沒有定義的虛擬元素。不一樣於其餘選擇器，它不以元素元素爲最小選擇單元，它選擇的是元素制定單元。好比::before表示選擇元素內容的以前內容；::selection表示選擇元素被選中的內容。
3）僞類/僞元素一覽表
<僞類以下>

/*
:active      選擇正在被激活的元素
:hover         選擇被鼠標懸浮着元素
:link        選擇未被訪問的元素
:visited     選擇已被訪問的元素
:first-child 選擇知足是其父元素的第一個子元素的元素    
:lang         選擇帶有指定 lang 屬性的元素
:focus       選擇擁有鍵盤輸入焦點的元素
:enable      選擇每一個已啓動的元素
:disable     選擇每一個已禁止的元素
:checked     選擇每一個被選中的元素    
:target      選擇當前的錨點元素
*/

<僞元素以下>

/*
::first-letter    選擇指定元素的第一個單詞
::first-line      選擇指定元素的第一行
::after           在指定元素的內容後面插入內容
::before          在指定元素的內容前面插入內容
::selection       選擇指定元素中被用戶選中的內容
*/

7.介紹一下JS的基本數據類型

Undefined，Null，Boolean，Number，String

8.JavaScript的typeof返回那些數據類型

undefined，string，boolean，number，symbol(ES6)，object，function

9.介紹一下JS有哪些內置對象？

數據封裝類對象：Object、Array、Boolean、Number、String
其餘對象：Function、Argument、Math、Date、RegExp、Error

10.null和undefined的區別

1）null表示一個對象被定義了，值爲「空值」；undefined表示不存在這個值。
2）變量被定義了，可是沒有賦值時，就等於undefined。
3）注意：在驗證null時，要用===，由於==沒法區分null和undefined。
typeof null // "object" 說明：null是一個沒有任何屬性和方法的對象

11.對JSON的瞭解

1) JSON(JavaScript Object Notation)是一種輕量級的數據交換格式。
2) 它是基於JavaScript的一個子集。數據格式簡單，易於讀寫，佔用帶寬小。 如：{"age":"12", "name":"back"}

12.列舉3種強制類型轉換和2種隱式類型轉換

強制：parseInt()，parseFloat()，Number()，（Boolean()，String()）
隱式：==，！

13.input的type屬性有哪些？

text：文本框
password：密碼
radio：單選按鈕
checkbox：複選框
file：文件選擇域
hidden：隱藏域
button：按鈕
reset：重置按鈕
submit：表單提交按鈕
image：圖片按鈕

14.IE和標準下有哪些兼容性的寫法

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

15.如何阻止事件冒泡

ie:阻止冒泡ev.cancelBubble = true;
非IE ev.stopPropagation();

16.如何阻止默認事件

1)return false；2) ev.preventDefault();