JavaScript知識總結 ES6篇
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
1. let、const、var的區別
（1）塊級作用域：塊作用域由 { }包括，let和const具有塊級作用域，var不存在塊級作用域。塊級作用域解決了ES5中的兩個問題：
- 內層變數可能覆蓋外層變數
- 用來計數的迴圈變數洩露為全域性變數
（2）變數提升：var存在變數提升，let和const不存在變數提升，即在變數只能在宣告之後使用，否在會報錯。
（3）給全域性新增屬性：瀏覽器的全域性物件是window，Node的全域性物件是global。var宣告的變數為全域性變數，並且會將該變數新增為全域性物件的屬性，但是let和const不會。
（4）重複宣告：var宣告變數時，可以重複宣告變數，後宣告的同名變數會覆蓋之前宣告的遍歷。const和let不允許重複宣告變數。
（5）暫時性死區：在使用let、const命令宣告變數之前，該變數都是不可用的。這在語法上，稱為暫時性死區。使用var宣告的變數不存在暫時性死區。
（6）初始值設定：在變數宣告時，var 和 let 可以不用設定初始值。而const宣告變數必須設定初始值。
（7）指標指向：let和const都是ES6新增的用於建立變數的語法。 let建立的變數是可以更改指標指向（可以重新賦值）。但const宣告的變數是不允許改變指標的指向。
2. const物件的屬性可以修改嗎
const保證的並不是變數的值不能改動，而是變數指向的那個記憶體地址不能改動。對於基本型別的資料（數值、字串、布林值），其值就儲存在變數指向的那個記憶體地址，因此等同於常量。
但對於引用型別的資料（主要是物件和陣列）來說，變數指向資料的記憶體地址，儲存的只是一個指標，const只能保證這個指標是固定不變的，至於它指向的資料結構是不是可變的，就完全不能控制了。
3. 如果new一個箭頭函式的會怎麼樣
箭頭函式是ES6中的提出來的，它沒有prototype，也沒有自己的this指向，更不可以使用arguments引數，所以不能New一個箭頭函式。
new操作符的實現步驟如下：
- 建立一個物件
- 將建構函式的作用域賦給新物件（也就是將物件的__proto__屬性指向建構函式的prototype屬性）
- 指向建構函式中的程式碼，建構函式中的this指向該物件（也就是為這個物件新增屬性和方法）
- 返回新的物件
所以，上面的第二、三步，箭頭函式都是沒有辦法執行的。
4. 箭頭函式與普通函式的區別
（1）箭頭函式比普通函式更加簡潔
- 如果沒有引數，就直接寫一個空括號即可
- 如果只有一個引數，可以省去引數的括號
- 如果有多個引數，用逗號分割
- 如果函式體的返回值只有一句，可以省略大括號
- 如果函式體不需要返回值，且只有一句話，可以給這個語句前面加一個void關鍵字。最常見的就是呼叫一個函式：
let fn = () => void doesNotReturn();
（2）箭頭函式沒有自己的this
箭頭函式不會建立自己的this， 所以它沒有自己的this，它只會在自己作用域的上一層繼承this。所以箭頭函式中this的指向在它在定義時已經確定了，之後不會改變。
（3）箭頭函式繼承來的this指向永遠不會改變
var id = 'GLOBAL';
var obj = {
id: 'OBJ',
a: function(){
console.log(this.id);
},
b: () => {
console.log(this.id);
}
};
obj.a(); // 'OBJ'
obj.b(); // 'GLOBAL'
new obj.a() // undefined
new obj.b() // Uncaught TypeError: obj.b is not a constructor
物件obj的方法b是使用箭頭函式定義的，這個函式中的this就永遠指向它定義時所處的全域性執行環境中的this，即便這個函式是作為物件obj的方法呼叫，this依舊指向Window物件。需要注意，定義物件的大括號{}是無法形成一個單獨的執行環境的，它依舊是處於全域性執行環境中。
（4）call()、apply()、bind()等方法不能改變箭頭函式中this的指向
var id = 'Global';
let fun1 = () => {
console.log(this.id)
};
fun1(); // 'Global'
fun1.call({id: 'Obj'}); // 'Global'
fun1.apply({id: 'Obj'}); // 'Global'
fun1.bind({id: 'Obj'})(); // 'Global'
（5）箭頭函式不能作為建構函式使用
建構函式在new的步驟在上面已經說過了，實際上第二步就是將函式中的this指向該物件。 但是由於箭頭函式時沒有自己的this的，且this指向外層的執行環境，且不能改變指向，所以不能當做建構函式使用。
（6）箭頭函式沒有自己的arguments
箭頭函式沒有自己的arguments物件。在箭頭函式中訪問arguments實際上獲得的是它外層函式的arguments值。
（7）箭頭函式沒有prototype
（8）箭頭函式不能用作Generator函式，不能使用yeild關鍵字
5. 箭頭函式的this指向哪⾥？
箭頭函式不同於傳統JavaScript中的函式，箭頭函式並沒有屬於⾃⼰的this，它所謂的this是捕獲其所在上下⽂的 this 值，作為⾃⼰的 this 值，並且由於沒有屬於⾃⼰的this，所以是不會被new調⽤的，這個所謂的this也不會被改變。
可以⽤Babel理解⼀下箭頭函式:
// ES6
const obj = {
getArrow() {
return () => {
console.log(this === obj);
};
}
}
轉化後：
// ES5，由 Babel 轉譯
var obj = {
getArrow: function getArrow() {
var _this = this;
return function () {
console.log(_this === obj);
};
}
};
6. 擴充套件運算子的作用及使用場景
（1）物件擴充套件運算子
物件的擴充套件運算子(...)用於取出引數物件中的所有可遍歷屬性，拷貝到當前物件之中。
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
上述方法實際上等價於:
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }
Object.assign方法用於物件的合併，將源物件（source）的所有可列舉屬性，複製到目標物件（target）。Object.assign方法的第一個引數是目標物件，後面的引數都是源物件。(如果目標物件與源物件有同名屬性，或多個源物件有同名屬性，則後面的屬性會覆蓋前面的屬性)。
同樣，如果使用者自定義的屬性，放在擴充套件運算子後面，則擴充套件運算子內部的同名屬性會被覆蓋掉。
let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}}; // {a: 2, b: 4}
利用上述特性就可以很方便的修改物件的部分屬性。在redux中的reducer函式規定必須是一個純函式，reducer中的state物件要求不能直接修改，可以通過擴充套件運算子把修改路徑的物件都複製一遍，然後產生一個新的物件返回。
需要注意：擴充套件運算子對物件例項的拷貝屬於淺拷貝。
（2）陣列擴充套件運算子
陣列的擴充套件運算子可以將一個數組轉為用逗號分隔的引數序列，且每次只能展開一層陣列。
console.log(...[1, 2, 3]) // 1 2 3 console.log(...[1, [2, 3, 4], 5]) // 1 [2, 3, 4] 5
下面是陣列的擴充套件運算子的應用：
- 將陣列轉換為引數序列
function add(x, y) {
return x + y;
}
const numbers = [1, 2];
add(...numbers) // 3
- 複製陣列
const arr1 = [1, 2]; const arr2 = [...arr1];
要記住：擴充套件運算子(…)用於取出引數物件中的所有可遍歷屬性，拷貝到當前物件之中，這裡引數物件是個陣列，數組裡面的所有物件都是基礎資料型別，將所有基礎資料型別重新拷貝到新的陣列中。
- 合併陣列
如果想在陣列內合併陣列，可以這樣：
const arr1 = ['two', 'three']; const arr2 = ['one', ...arr1, 'four', 'five']; // ["one", "two", "three", "four", "five"]
- 擴充套件運算子與解構賦值結合起來，用於生成陣列
const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5]
需要注意：如果將擴充套件運算子用於陣列賦值，只能放在引數的最後一位，否則會報錯。
const [...rest, last] = [1, 2, 3, 4, 5]; // 報錯 const [first, ...rest, last] = [1, 2, 3, 4, 5]; // 報錯
- 將字串轉為真正的陣列
[...'hello'] // [ "h", "e", "l", "l", "o" ]
- 任何 Iterator 介面的物件，都可以用擴充套件運算子轉為真正的陣列
比較常見的應用是可以將某些資料結構轉為陣列：
// arguments物件
function foo() {
const args = [...arguments];
}
用於替換es5中的Array.prototype.slice.call(arguments)寫法。
-
使用
Math函式獲取陣列中特定的值
const numbers = [9, 4, 7, 1]; Math.min(...numbers); // 1 Math.max(...numbers); // 9
7. Proxy 可以實現什麼功能？
在 Vue3.0 中通過 Proxy 來替換原本的 Object.defineProperty 來實現資料響應式。
Proxy 是 ES6 中新增的功能，它可以用來自定義物件中的操作。
let p = new Proxy(target, handler)
target 代表需要新增代理的物件，handler 用來自定義物件中的操作，比如可以用來自定義 set 或者 get 函式。
下面來通過 Proxy 來實現一個數據響應式：
let onWatch = (obj, setBind, getLogger) => {
let handler = {
get(target, property, receiver) {
getLogger(target, property)
return Reflect.get(target, property, receiver)
},
set(target, property, value, receiver) {
setBind(value, property)
return Reflect.set(target, property, value)
}
}
return new Proxy(obj, handler)
}
let obj = { a: 1 }
let p = onWatch(
obj,
(v, property) => {
console.log(`監聽到屬性${property}改變為${v}`)
},
(target, property) => {
console.log(`'${property}' = ${target[property]}`)
}
)
p.a = 2 // 監聽到屬性a改變
p.a // 'a' = 2
在上述程式碼中，通過自定義 set 和 get 函式的方式，在原本的邏輯中插入了我們的函式邏輯，實現了在對物件任何屬性進行讀寫時發出通知。
當然這是簡單版的響應式實現，如果需要實現一個 Vue 中的響應式，需要在 get 中收集依賴，在 set 派發更新，之所以 Vue3.0 要使用 Proxy 替換原本的 API 原因在於 Proxy 無需一層層遞迴為每個屬性新增代理，一次即可完成以上操作，效能上更好，並且原本的實現有一些資料更新不能監聽到，但是 Proxy 可以完美監聽到任何方式的資料改變，唯一缺陷就是瀏覽器的相容性不好。
8. 對物件與陣列的解構的理解
解構是 ES6 提供的一種新的提取資料的模式，這種模式能夠從物件或數組裡有針對性地拿到想要的數值。
1）陣列的解構
在解構陣列時，以元素的位置為匹配條件來提取想要的資料的：
const [a, b, c] = [1, 2, 3]
最終，a、b、c分別被賦予了陣列第0、1、2個索引位的值：
數組裡的0、1、2索引位的元素值，精準地被對映到了左側的第0、1、2個變數裡去，這就是陣列解構的工作模式。還可以通過給左側變數陣列設定空佔位的方式，實現對陣列中某幾個元素的精準提取：
const [a,,c] = [1,2,3]
2）物件的解構
物件解構比陣列結構稍微複雜一些，也更顯強大。在解構物件時，是以屬性的名稱為匹配條件，來提取想要的資料的。現在定義一個物件：
const stu = {
name: 'Bob',
age: 24
}
假如想要解構它的兩個自有屬性，可以這樣：
const { name, age } = stu
這樣就得到了 name 和 age 兩個和 stu 平級的變數：
注意，物件解構嚴格以屬性名作為定位依據，所以就算調換了 name 和 age 的位置，結果也是一樣的：
const { age, name } = stu
9. 如何提取高度巢狀的物件裡的指定屬性？
有時會遇到一些巢狀程度非常深的物件：
const school = {
classes: {
stu: {
name: 'Bob',
age: 24,
}
}
}
像此處的 name 這個變數，嵌套了四層，此時如果仍然嘗試老方法來提取它：
const { name } = school
顯然是不奏效的，因為 school 這個物件本身是沒有 name 這個屬性的，name 位於 school 物件的“兒子的兒子”物件裡面。要想把 name 提取出來，一種比較笨的方法是逐層解構：
const { classes } = school
const { stu } = classes
const { name } = stu
name // 'Bob'
但是還有一種更標準的做法，可以用一行程式碼來解決這個問題：
const { classes: { stu: { name } }} = school
console.log(name) // 'Bob'
可以在解構出來的變數名右側，通過冒號+{目標屬性名}這種形式，進一步解構它，一直解構到拿到目標資料為止。
10. 對 rest 引數的理解
擴充套件運算子被用在函式形參上時，它還可以把一個分離的引數序列整合成一個數組：
function mutiple(...args) {
let result = 1;
for (var val of args) {
result *= val;
}
return result;
}
mutiple(1, 2, 3, 4) // 24
這裡，傳入 mutiple 的是四個分離的引數，但是如果在 mutiple 函式裡嘗試輸出 args 的值，會發現它是一個數組：
function mutiple(...args) {
console.log(args)
}
mutiple(1, 2, 3, 4) // [1, 2, 3, 4]
這就是 … rest運算子的又一層威力了，它可以把函式的多個入參收斂進一個數組裡。這一點經常用於獲取函式的多餘引數，或者像上面這樣處理函式引數個數不確定的情況。
11. ES6中模板語法與字串處理
ES6 提出了“模板語法”的概念。在 ES6 以前，拼接字串是很麻煩的事情：
var name = 'css' var career = 'coder' var hobby = ['coding', 'writing'] var finalString = 'my name is ' + name + ', I work as a ' + career + ', I love ' + hobby[0] + ' and ' + hobby[1]
僅僅幾個變數，寫了這麼多加號，還要時刻小心裡面的空格和標點符號有沒有跟錯地方。但是有了模板字串，拼接難度直線下降：
var name = 'css'
var career = 'coder'
var hobby = ['coding', 'writing']
var finalString = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}`
字串不僅更容易拼了，也更易讀了，程式碼整體的質量都變高了。這就是模板字串的第一個優勢——允許用${}的方式嵌入變數。但這還不是問題的關鍵，模板字串的關鍵優勢有兩個：
- 在模板字串中，空格、縮排、換行都會被保留
- 模板字串完全支援“運算”式的表示式，可以在${}裡完成一些計算
基於第一點，可以在模板字串裡無障礙地直接寫 html 程式碼：
let list = ` <ul> <li>列表項1</li> <li>列表項2</li> </ul> `; console.log(message); // 正確輸出，不存在報錯
基於第二點，可以把一些簡單的計算和呼叫丟進 ${} 來做：
function add(a, b) {
const finalString = `${a} + ${b} = ${a+b}`
console.log(finalString)
}
add(1, 2) // 輸出 '1 + 2 = 3'
除了模板語法外， ES6中還新增了一系列的字串方法用於提升開發效率：
- 存在性判定：在過去，當判斷一個字元/字串是否在某字串中時，只能用 indexOf > -1 來做。現在 ES6 提供了三個方法：includes、startsWith、endsWith，它們都會返回一個布林值來告訴你是否存在。
- includes：判斷字串與子串的包含關係：
const son = 'haha' const father = 'xixi haha hehe' father.includes(son) // true
- startsWith：判斷字串是否以某個/某串字元開頭：
const father = 'xixi haha hehe'
father.startsWith('haha') // false
father.startsWith('xixi') // true
- endsWith：判斷字串是否以某個/某串字元結尾：
const father = 'xixi haha hehe'
father.endsWith('hehe') // true
- 自動重複：可以使用 repeat 方法來使同一個字串輸出多次（被連續複製多次）：
const sourceCode = 'repeat for 3 times;' const repeated = sourceCode.repeat(3) console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 times;
