文章目錄
1. let、const、var的區別
-
let完全可以取代var，因爲兩者語義相同，而且let沒有副作用。let不會變量提升，只在塊級作用域內有用 -
在
let和const之間，建議優先使用const，尤其是在全局環境，不應該設置變量，只應設置常量。 -
const優於let有幾個原因。一個是const可以提醒閱讀程序的人，這個變量不應該改變；另一個是const比較符合函數式編程思想，運算不改變值，只是新建值，而且這樣也有利於將來的分佈式運算；最後一個原因是 JavaScript 編譯器會對const進行優化，所以多使用const，有利於提高程序的運行效率，也就是說let和const的本質區別，其實是編譯器內部的處理不同
2. map與普通對象的區別
普通對象只能用字符串當作鍵，而es6中的map數據結構，類似於對象，也是鍵值對的集合，但是鍵的範圍不限於字符串，各種類型的值（包括對象）都可以當作鍵
3. 常用es6語法
箭頭函數，模板字符串、變量解構賦值、proxy、promise對象、class類的引入、set與map數據結構
4. 常見解決跨域方法
-
jsonp跨域
通過script標籤引入js文件，這個js文件又會返回一個js函數調用，也就是請求後通過callback方式回傳結果
優點:
1.不受同源策略限制
2.兼容性更好
3.支持老版本瀏覽器缺點：只支持get請求
-
cors跨域
使用自定義的http頭部請求。讓瀏覽器與服務器之間進行溝通，從而決定請求或相應是否成功
優點：
- 支持所有類型的http請求
- 比jsonp有更好的錯誤處理機制
- 被大多數瀏覽器支持
-
h5的postMessage方法
h5新特性，目前只支持窗口（iframe）之間交換數據， 不能和服務端交換
5. ajax瞭解
客戶端發起請求，獲取或發送服務端數據的一項技術
優勢
- 無刷新頁面
- 服務器端任務轉到客戶端處理
- 減輕瀏覽器負擔節約帶寬
- 徹底將頁面與數據分離
缺點
- 無法使用回退按鈕
- 不利於網頁seo
- 不能發送跨域請求
6. 閉包
嵌套函數引用了外部函數變量的函數叫做閉包。可能會造成變量污染
7. window.location對象包括哪些屬性
hash、host、hostname、href、origin、pathname、search、protocol
8. 輪播圖實現原理概述
一系列的大小相等的圖片平鋪，利用CSS佈局只顯示一張圖片，其餘隱藏。通過計算偏移量利用定時器實現自動播放，或通過手動點擊事件切換圖片
9. this的指向
this永遠指向最後調用它的那個對象
Tips：改變this指向的方法:
- 使用es6的箭頭函數，箭頭函數的this始終指向函數定義時的this、而非執行時
- 函數內部使用_this=this
- 使用apply、call、bind
- new實例化一個對象
10. 嚴格模式理解
引自阮一峯老師博客詳解嚴格模式
嚴格模式是ES5中提出的運行模式，其目的爲下面幾個
- 消除js語法的一些不合理、不嚴謹之處，減少一些怪異行爲；
- 消除代碼運行的不安全之處，保證代碼運行安全
- 提高編譯器效率，增加運行速度
- 爲未來新版本的js做好鋪墊
調用:
<script>
"use strict"; // 必須放在第一行
</script>
// 針對函數
function strict(){
"use strict";
return "這是嚴格模式"
}
規定:
- 全局變量必須顯示聲明
- 禁止使用with語句
- 創設eval作用域。正常模式下，eval語句的作用域，取決於它處於全局作用域，還是處於函數作用域。嚴格模式下，eval語句本身就是一個作用域，不再能夠生成全局變量了，它所生成的變量只能用於eval內部。
"use strict";
var x = 2;
console.info(eval("var x = 5; x")); // 5
console.info(x); // 2
- 禁止this關鍵字指向全局對象
- 禁止在函數內部遍歷調用棧
- 禁止刪除變量，只有configurable設置爲true的對象屬性，才能被刪除
"use strict";
var x;
delete x; // 語法錯誤
var o = Object.create(null, {'x': {
value: 1,
configurable: true
}});
delete o.x; // 刪除成功
- 對一個對象只讀屬性賦值報錯
- 對一個getter方法讀取的屬性賦值報錯
- 對禁止擴展的對象添加新屬性報錯
- 刪除不可刪除的屬性報錯
- 對象不能有重名屬性
- 函數不能有重名參數
- 禁止八進制表示法 如
var n=0100； - 不允許對arguments賦值；
- arguments不再追蹤參數變化
function f(a) {
a = 2;
return [a, arguments[0]];
}
f(1); // 正常模式爲[2,2]
function f(a) {
"use strict";
a = 2;
return [a, arguments[0]];
}
f(1); // 嚴格模式爲[2,1]
- 禁止使用arguments.callee
- 函數必須聲明在頂層
- 也就是說，不允許在非函數的代碼塊內聲明函數
11. bind、call、apply區別
apply()方法調用一個函數，其具有一個指定this值，以及作爲一個數組（或類似數組的對象）提供的參數
call()方法接受的是若干個參數列表，而apply接收的是一個包含多個參數的數組
bind()方法創建一個新的函數，然後傳入this所綁定的值和參數
var a ={
name : "Cherry",
fn : function (a,b) {
console.log( a + b)
}
}
var b = a.fn;
b.apply(a,[1,2]) // 3
b.call(a,1,2) // 3
b.bind(a,1,2)() // 3
12. 創建對象的方法
直接賦值，new實例， 工廠函數
13. js基本數據類型
Undefined、Null、Boolean、Number、String、Symbol(ES6引入的表示獨一無二的值)、BigInt
14. js引用數據類型
Array、Object、Function
15. 深拷貝的實現方案
- jQuery的extend方法
$.extend(true, {}, obj) - lodash.cloneDeep()方法
- 遞歸