前端常見面試題（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>
設立"嚴格模式"的優點：
- 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全；
- 提高編譯器效率，增加運行速度；
- 為未來新版本的Javascript做好鋪墊。
注：經過測試 IE6,7,8,9 均不支持嚴格模式。
缺點：
現在網站的 JS 都會進行壓縮，一些文件用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的文件，被 merge 后，這個串就到了文件的中間，不僅沒有指示嚴格模式，反而在壓縮后浪費了字節。
7.什么是document對象，什么是window對象。區別？
document是window的一個對象屬性。
Window 對象表示瀏覽器中打開的窗口。
如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創建一個 window 對象，並為每個框架創建一個額外的 window 對象。
所有的全局函數和對象都屬於Window 對象的屬性和方法。
document 對 Document 對象的只讀引用。
區別:
1、window 指窗體。document指頁面。document是window的一個子對象。
2、用戶不能改變 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從中起到一個連接橋的作用。
1、實現數據與視圖的分離
2、通過數據來驅動視圖，開發者只需要關心數據變化，DOM操作被封裝了。
12.從輸入網址到頁面呈現都發生了什么？
1.網絡通訊
地址解析，解析出的域名進行dns解析，通過ip尋址和arp找到服務器，服務器與客戶端（瀏覽器）進行tcp三次握手，建立鏈接。瀏覽器發送數據，等待服務器響應，服務器處理請求，並對請求做出相應。瀏覽器收到請求，得到html代碼。↓
2.頁面渲染
基本過程
1．解析HTML文件，創建DOM樹
2．解析CSS,形成CSS對象模型
3．將CSS與DOM合並，構建渲染樹（renderingtree）
4．布局和繪制
13.創建一個對象有哪些方法？
1、工廠模式
2、構造函數模式
3、原型模式
14.new一個實例對象會發生什么 ：
1、創建一個新對象
2、將構造函數的作用域賦給新對象（this）
3、執行構造函數中的代碼（為新對象添加屬性）
4、返回該對象。
15.基本數據類型和引用數據類型有什么區別？
基本數據類型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），這些類型可以直接操作保存在變量中的實際值。
引用數據類型：Object（在JS中除了基本數據類型以外的都是對象，數據是對象，函數是對象，正則表達式是對象）
區別：
1、聲明變量時內存分配不同
2、不同的內存分配帶來不同的訪問機制
3、復制變量時的不同
4、參數傳遞的不同（把實參復制給形參的過程）
16.箭頭函數和普通函數的區別？
箭頭函數：
let fun = () => {
console.log('lalalala');
}
普通函數：
function fun() {
console.log('lalla');
}
箭頭函數是匿名函數，不能作為構造函數，不能使用new
- 箭頭函數的 this 永遠指向其上下文的 this ，任何方法都改變不了其指向，如 call() , bind() , apply()
- 普通函數的this指向調用它的那個對象
17.數組去重幾種方法
1.定義一個新數組，並存放原數組的第一個元素，然后將元素組一一和新數組的元素對比，若不同則存放在新數組中。
2.先排序在去重，先將原數組排序，在與相鄰的進行比較，如果不同則存入新數組
3.利用對象的屬性去重（推薦），每次取出原數組的元素，然后再對象中訪問這個屬性，如果存在就說明重復
4.利用下標查詢
5、利用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→→模板編譯→→編譯，替換被綁定元素→→→編譯，掛載→→→→→→組件更新之前→→→→→→組件更新之后→→→→→生命周期結束