在這先來(lái)個(gè)截點(diǎn)，最近過(guò)年放假各種事情忙東忙西的，學(xué)習(xí)也中斷了，斷斷續(xù)續(xù)的，已經(jīng)有點(diǎn)遺忘之前看過(guò)的知識(shí)要點(diǎn)了，再這重新復(fù)習(xí)一下：
之前學(xué)習(xí)的章節(jié)：
1、let和const命令
2、變量的解構(gòu)賦值
3、函數(shù)的擴(kuò)展
一、let和const
1、let
- 一個(gè)大括號(hào)就是一個(gè)塊級(jí)作用域，let聲明的變量只在自己的作用域有效；
2）es6嚴(yán)格模式下，變量未聲明不能引用，不然會(huì)報(bào)錯(cuò)
3）let不能重復(fù)聲明
4）let不存在變量提升
2、const
1）const聲明之后必須賦值，否則編譯不通過(guò)
2）const聲明的值不允許修改
Javascript中，通常說(shuō)的作用域是函數(shù)作用域，使用var聲明的變量，無(wú)論是在代碼的哪個(gè)地方聲明的，都會(huì)提升到當(dāng)前作用域的最頂部，這種行為叫做變量提升。
在ES5中，使用var去聲明變量，var命令會(huì)發(fā)生“變量提升”現(xiàn)象，即變量可以在聲明之前使用，值為undefined。一般邏輯中，變量應(yīng)該在聲明語(yǔ)句之中才可以使用
在ES6中，使用let和const聲明變量，并且必須提前聲明變量才可以使用
在ES5中只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域。而let則實(shí)際上為Javascript新增了塊級(jí)作用及。用let聲明的變量，只在let命令所在的代碼塊內(nèi)有效。
Note：
const的作用域與let命令相同：只在聲明所在的塊級(jí)作用域內(nèi)有效
const聲明的變量不得改變值，這意味著，const一旦聲明變量就會(huì)立即初始化，不能留到以后賦值
const命令聲明的常量也是不提升，同樣存在暫時(shí)性死區(qū)，只能在聲明的位置后面使用
當(dāng)前使用塊級(jí)綁定的最佳實(shí)踐是：默認(rèn)使用const，只在確實(shí)需要改變變量時(shí)使用let
暫時(shí)性死區(qū)
只在塊級(jí)作用域內(nèi)存在let命令，它所聲明的變量就綁定這個(gè)區(qū)域，不再受外部的影響
ES6明確規(guī)定，如果區(qū)塊中存在let和const命令，這個(gè)區(qū)塊對(duì)這些命令聲明的變量，從一開(kāi)始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會(huì)報(bào)錯(cuò)。在使用let命令聲明變量之前，該變量都是不可用的。這在語(yǔ)法上就成為“暫時(shí)性死區(qū)”
二、解構(gòu)賦值
1、解構(gòu)賦值：
{
let a, b, rest;
[a, b, rest] = [1, 2];
console.log(a, b, rest); //1 2 undefined
}
{
let a, b, rest;
[a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7];
console.log(a, b, rest); //1 2 [3, 4, 5, 6, 7]
}
2、對(duì)象的解構(gòu)賦值
let a,b;
({a,b} = {a:1,b:2});
console.log(a,b)//1 2
————————————————————————————————
數(shù)組的擴(kuò)展
1、擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符是三個(gè)點(diǎn)（...）
它好比rest參數(shù)的逆運(yùn)算，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列
console.log(...[1,2,3])
//1 2 3
console.log(1, ...[2, 3, 4], 5)
//1 2 3 4 5
該運(yùn)算符主要用于函數(shù)調(diào)用
擴(kuò)展運(yùn)算符與正常的函數(shù)參數(shù)可以結(jié)合使用，在擴(kuò)展運(yùn)算符后面也協(xié)議防止表達(dá)式：
const arr =[
...(x>0?['a'] : [ ]),
' b ',
];
如果擴(kuò)展運(yùn)算符后面是一個(gè)空數(shù)組，則不產(chǎn)生任何效果：
[...[],1]//[1]
注意，擴(kuò)展運(yùn)算符如果放在括號(hào)中，Javascript引擎就會(huì)認(rèn)為這是函數(shù)調(diào)用。如果這時(shí)不是函數(shù)調(diào)用就會(huì)報(bào)錯(cuò)。
(...[1,2])
//Uncaught SyntaxError: Invalid destructuring assignment target
console.log((...[1,2]))
//Uncaught SyntaxError: Invalid destructuring assignment target
console.log(...[1,2]) //1 2
替代函數(shù)的apply方法
由于擴(kuò)展運(yùn)算符可以展開(kāi)數(shù)組，所以不再需要apply方法，將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)了。
下面是擴(kuò)展運(yùn)算符取代apply方法的一個(gè)時(shí)機(jī)的例子，應(yīng)用Math.max方法，簡(jiǎn)化求出一個(gè)數(shù)組最大元素的寫(xiě)法：
//ES5
Math.max.apply(null,[14,3,77])
//ES6
Math.max(...[14,3,77])
//等同于
Math.max(14,3,77);
另外可以直接通過(guò)push函數(shù)，將一個(gè)數(shù)組添加到另一個(gè)數(shù)組的尾部
//ES5
var arr1=[0,1,2];
var arr2=[3,4,5];
Array.prototype.push.apply(arr1,arr2);
//ES6
let arr1=[0,1,2];
let arr2=[3,4,5];
arr1.push(...arr2);
在ES5的寫(xiě)法中，push方法的參數(shù)不能是數(shù)組，所以只好通過(guò)apply方法變通使用push方法。有了擴(kuò)展運(yùn)算符可以直接將數(shù)組傳入push方法
擴(kuò)展運(yùn)算符的應(yīng)用
1）復(fù)制數(shù)組
數(shù)組是復(fù)合的數(shù)據(jù)類(lèi)型，直接復(fù)制的話，只是復(fù)制了指向底層數(shù)據(jù)結(jié)構(gòu)的指針，而不是克隆一個(gè)全新的數(shù)組。
擴(kuò)展運(yùn)算符提供了復(fù)制數(shù)組的簡(jiǎn)便寫(xiě)法
const a1=[1,2];
//寫(xiě)法一
const a2=[...a1];
//寫(xiě)法二
const [...a2]=a1;
//這兩種寫(xiě)法，a2都是a1的克隆，修改a2不會(huì)對(duì)a1產(chǎn)生影響
2）合并數(shù)組
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并數(shù)組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并數(shù)組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
3）與解構(gòu)賦值結(jié)合
擴(kuò)展運(yùn)算符可以與解構(gòu)賦值結(jié)合起來(lái)，用于生成數(shù)組
//ES5
a=list[0],rest = list.slice(1)
//ES6
[a,...rest] = list
如果將擴(kuò)展運(yùn)算符用于數(shù)組賦值，只能放在參數(shù)的最后一位，否則會(huì)報(bào)錯(cuò)
const [...butLast, last] = [1, 2, 3, 4, 5];
// 報(bào)錯(cuò)
const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報(bào)錯(cuò)
4）字符串
擴(kuò)展運(yùn)算符還可以將字符串轉(zhuǎn)為真正的數(shù)組
[...'hello'] // ["h", "e", "l", "l", "o"]
這樣寫(xiě)的好處就是能夠正確識(shí)別四個(gè)字節(jié)的Unicode字符
5）實(shí)現(xiàn)了Iterator接口的對(duì)象
任何定義了遍歷器接口的對(duì)象都可以用擴(kuò)展運(yùn)算符轉(zhuǎn)為真正的數(shù)組
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
上面代碼中，querySelectorAll方法返回的是一個(gè)NodeList對(duì)象。它不是數(shù)組，而是一個(gè)類(lèi)似數(shù)組的對(duì)象。這時(shí)，擴(kuò)展運(yùn)算符可以將其轉(zhuǎn)為真正的數(shù)組，原因就在于NodeList對(duì)象實(shí)現(xiàn)了 Iterator 。
6）Map和Set結(jié)構(gòu)，Generator函數(shù)
擴(kuò)展運(yùn)算符內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的Iterator接口，因此只要具有Iterator接口的對(duì)象，都可以使用擴(kuò)展運(yùn)算符，比如Map結(jié)構(gòu)
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
