前端常見面試題（1）————前端

前端常見面試題（1）————前端

1.NaN的意思：

not a number，number類型。 驗證：isNaN

2.==和===的區別：

== 表明相同， ===表明嚴格相同,。

　　雙等號==：

　　（1）若是兩個值類型相同，再進行三個等號(===)的比較

　　（2）若是兩個值類型不一樣，也有可能相等，需根據如下規則進行類型轉換在比較：

　　　　1）若是一個是null，一個是undefined，那麼相等

　　　　2）若是一個是字符串，一個是數值，把字符串轉換成數值以後再進行比較

　　三等號===:

　　（1）若是類型不一樣，就必定不相等

　　（2）若是兩個都是數值，而且是同一個值，那麼相等；若是其中至少一個是NaN，那麼不相等。（判斷一個值是不是NaN，只能使用isNaN( ) 來判斷）

　　（3）若是兩個都是字符串，每一個位置的字符都同樣，那麼相等，不然不相等。

　　（4）若是兩個值都是true，或是false，那麼相等

　　（5）若是兩個值都引用同一個對象或是函數，那麼相等，不然不相等

　　（6）若是兩個值都是null，或是undefined，那麼相等

3.null和undefined的區別：

null：Null類型，表明 「空值」，表明一個空對象指針，使用typeof運算獲得 「object」 ，因此能夠認爲它是一個特殊的對象值。

undefined：Undefined類型，當一個聲明瞭一個變量未初始化時，獲得的就是 undefined。

4.typeof bar ==="object"這個驗證的風險有哪些：

null也是object,若是值爲null就會出問題了！

JQ解決方法：(bar !== null) && (typeof bar === "object") && (! $.isArray(bar))

5.get和post的區別：

（1）.url可見性：get，參數url可見 post，url參數不可見

get把請求的數據放在url上，即HTTP協議頭上，其格式爲：以?分割URL和傳輸數據，參數之間以&相連；post把數據放在HTTP的包體內（requrest body）

（2）.傳輸數據的大小：
get通常傳輸數據大小不超過2k-4k
post請求傳輸數據的大小根據php.ini 配置文件設定，也能夠無限大

（3）.數據傳輸上：
get，經過拼接url進行傳遞參數
post，經過body體傳輸參數

（4）.後退頁面的反應：
get請求頁面後退時，不產生影響
post請求頁面後退時，會從新提交請求

（5）.緩存性：
get請求是能夠緩存的
post請求不能夠緩存

（6）.安全性：
都不安全，原則上post確定要比get安全，畢竟傳輸參數時url不可見，但也擋不住部分人閒的沒事在那抓包玩，瀏覽器還會緩存get請求的數據。安全性我的以爲是沒多大區別的，防君子不防小人就是這個道理。對傳遞的參數進行加密，其實都同樣。

（7）.GET請求只能進行url編碼，而POST支持多種編碼方式

（8）.GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留

（9）.GET只接受ASCII字符的參數的數據類型，而POST沒有限制

6.use strict有什麼用：

<script>  
  "use strict";  
  console.log("這是嚴格模式。");  
</script>

設立"嚴格模式"的優勢：

1. 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
2. 消除代碼運行的一些不安全之處，保證代碼運行的安全；
3. 提升編譯器效率，增長運行速度；
4. 爲將來新版本的Javascript作好鋪墊。

注：通過測試 IE6,7,8,9 均不支持嚴格模式。

缺點：
如今網站的 JS 都會進行壓縮，一些文件用了嚴格模式，而另外一些沒有。這時這些原本是嚴格模式的文件，被 merge 後，這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節。

7.什麼是document對象，什麼是window對象。區別？

document是window的一個對象屬性。
Window 對象表示瀏覽器中打開的窗口。

若是文檔包含框架（frame 或 iframe 標籤），瀏覽器會爲 HTML 文檔建立一個 window 對象，併爲每一個框架建立一個額外的 window 對象。
全部的全局函數和對象都屬於Window 對象的屬性和方法。
document 對 Document 對象的只讀引用。

區別:
一、window 指窗體。document指頁面。document是window的一個子對象。
二、用戶不能改變 document.location(由於這是當前顯示文檔的位置)。可是,能夠改變window.location (用其它文檔取代當前文檔)window.location自己也是一個對象,而document.location不是對象

8.原型鏈：構造函數、原型對象、實例化對象三者的關係：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SVBgy4Ar-1570936189664)(d:\W519L\Desktop\8c2dd16ea9e6ae9fa0b01128045ce3a2.jpg)]

9.apply和call的關係：

/*apply()方法*/
function.apply(thisObj[, argArray])

/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

區別:call和apply都是調用一個對象的一個方法，用另外一個對象替換當前對象。而不一樣之處在於傳遞的參數，apply最多隻能有兩個參數——新this對象和一個數組argArray，若是arg不是數組則會報錯TypeError；

10.替代圖片的方法有哪些？

canvas繪圖，FontAwesome圖標庫。

11.MVC，MVVM框架原理：

MVC:將整個前端頁面分紅View，Controller，Modal，視圖上發生變化，經過Controller（控件）將響應傳入到Model（數據源），由數據源改變View上面的數據。

MVVM:分別指View，Model，View-Model，View經過View-Model的DOM Listeners將事件綁定到Model上，而Model則經過Data Bindings來管理View中的數據，View-Model從中起到一個鏈接橋的做用。

一、實現數據與視圖的分離
二、經過數據來驅動視圖，開發者只須要關心數據變化，DOM操做被封裝了。

12.從輸入網址到頁面呈現都發生了什麼？

1.網絡通信

地址解析，解析出的域名進行dns解析，經過ip尋址和arp找到服務器，服務器與客戶端（瀏覽器）進行tcp三次握手，創建連接。瀏覽器發送數據，等待服務器響應，服務器處理請求，並對請求作出相應。瀏覽器收到請求，獲得html代碼。↓

2.頁面渲染

基本過程

1．解析HTML文件，建立DOM樹

2．解析CSS,造成CSS對象模型

3．將CSS與DOM合併，構建渲染樹（renderingtree）

4．佈局和繪製

13.建立一個對象有哪些方法？

一、工廠模式

二、構造函數模式

三、原型模式

14.new一個實例對象會發生什麼 ：

一、建立一個新對象
二、將構造函數的做用域賦給新對象（this）
三、執行構造函數中的代碼（爲新對象添加屬性）
四、返回該對象。

15.基本數據類型和引用數據類型有什麼區別？

基本數據類型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），這些類型能夠直接操做保存在變量中的實際值。

引用數據類型：Object（在JS中除了基本數據類型之外的都是對象，數據是對象，函數是對象，正則表達式是對象）

區別：

一、聲明變量時內存分配不一樣

二、不一樣的內存分配帶來不一樣的訪問機制

三、複製變量時的不一樣

四、參數傳遞的不一樣（把實參複製給形參的過程）

16.箭頭函數和普通函數的區別？

箭頭函數：

let fun = () => {
    console.log('lalalala');
}

普通函數：

function fun() {
    console.log('lalla');
}

箭頭函數是匿名函數，不能做爲構造函數，不能使用new

• 箭頭函數的 this 永遠指向其上下文的 this ，任何方法都改變不了其指向，如 call() , bind() , apply()
• 普通函數的this指向調用它的那個對象

17.數組去重幾種方法

1.定義一個新數組，並存放原數組的第一個元素，而後將元素組一一和新數組的元素對比，若不一樣則存放在新數組中。
2.先排序在去重，先將原數組排序，在與相鄰的進行比較，若是不一樣則存入新數組
3.利用對象的屬性去重（推薦），每次取出原數組的元素，而後再對象中訪問這個屬性，若是存在就說明重複
4.利用下標查詢
五、利用ES6的set
   Set數據結構，它相似於數組，其成員的值都是惟一的。利用Array.from將Set結構轉換成數組

18.使用ES6中的set的好處：

更簡便的：數組去重，並集，交集，差集。

19.for循環能夠用什麼來代替:

// reduce寫法
sum = arr.reduce(function (prev, cur, index, arr) {
 return  prev + cur;
});
console.log(sum);
//forEach寫法
    sports.forEach(function (item) {
        item.sex = '男';
    })
    console.log(sports);

20.js遍歷對象的幾種方法

第一種： for......in

第二種：

1）、Object.keys（obj）

2）、Object.values（obj）

21.vue生命週期：

new vue→→初始化→→組件剛被建立→→導入依賴→→組件建立完成，屬性已綁定→→檢查vue配置→→檢查配置中的template→→模板編譯→→編譯，替換被綁定元素→→→編譯，掛載→→→→→→組件更新以前→→→→→→組件更新以後→→→→→生命週期結束