本文只是作為ES6入門第九章學習筆記，在整理知識點的同時，會加入部分個人思考與解答，若想知道更詳細的介紹，還請閱讀阮一峰大神的ES6入門
一、拓展運算符
ES6中新增了拓展運算（...）三個點，它的作用是將一個數組或實現了Iterator接口的對象/類數組(nodeList，arguments)轉為分隔的參數序列。
console.log(...['echo', '聽風是風', '時間跳躍']); //echo 聽風是風 時間跳躍
類數組arguments使用拓展運算符：
let fn = function () { console.log(...arguments); }; fn(1, 2, 3, 4); //1,2,3,4
數組拓展運算符與函數rest參數的區別：
比較巧的是，其實在ES6入門第八章函數拓展中，也有用三個小點且用於取代arguments的rest參數的rest參數。為了避免混淆兩者，我們做個簡單區分。
let fn = function (...rest) { rest.forEach(ele => console.log(ele)); }; fn('聽風是風', ...[1, 2, 3]); //聽風是風 1 2 3 //等同於 fn('聽風是風', 1, 2, 3);
rest參數作用是取代arguments，用於函數參數上，在函數內部使用rest參數時不需要帶上...；數組拓展運算符更多用於函數調用上，且...必須帶上。
//rest參數 let fn = function (...rest) { //使用時...不需要帶上 rest.forEach(ele => console.log(ele)); }; //數組拓展運算符 let arr = [1,2,3]; //使用時...永不離身 Math.max(...arr);//3
rest參數必須寫在函數參數末尾，否則標錯；數組拓展運算符在函數調用時可以出現在任意位置，但需要注意的是只有函數調用時才能放在圓括號中，否則報錯。
//錯誤用法,...rest只能出現在參數末尾 let fn = function (name, ...rest, age) {}; //錯誤用法，除非是函數調用，否則不能寫在花括號中 (...[1,2,3]);
二、拓展運算符的作用
1.取代apply方法
實際開發中我們常常需要通過apply或者call方法來調用某方法，但如果調用時參數是一個數組，就不得不使用apply，因為apply能將數組解析給單個參數傳遞給函數。
而拓展運算符剛好就具有將數組，類數組轉為單個元素序列的功能，因此能很好的取代apply。比如函數應用：
let fn = (x, y, z) => console.log(x + y + z), arr = [1, 2, 3]; //函數應用 //ES5 fn.apply(null, arr); //6 // ES6 fn(...arr); //6
還記得常用的數組取最大，最小值的方法嗎。Math.max同樣能夠簡寫：
let arr = [1, 2, 3, 4, 5]; //ES5 Math.max.apply(null, arr); //5 Math.min.apply(null, arr); //1 //ES6 Math.max(...arr); //5 Math.min(...arr); //1
將一個數組的元素壓入到另一個數組尾部(我之前都沒想過用這個做法...)：
let arr1 = [1, 2, 3], arr2 = [4, 5, 6]; //ES5 Array.prototype.push.apply(arr1, arr2); //ES6 arr1.push(...arr2);
2.合並/復制數組：
let arr1 = [1, 2, 3], arr2 = [4, 5, 6], arr3 = [7, 8, 9]; //ES5 let arr = arr1.concat(arr2, arr3); //ES6 let arr = [...arr1, ...arr2, ...arr3];
順帶一提，concat方法不會修改原數組，而是復制數組中的元素組成並返回一個新數組，concat和拓展運算符合並數組的操作都是淺拷貝。
你肯定會想，不是說concat是淺拷貝嗎，為啥我下面的修改合並的新數組沒跟這變化：
let arr1 = [1, 2, 3], arr2 = [4, 5, 6]; //ES5 let arr = arr1.concat(arr2); arr1.push(10); console.log(arr); //[1,2,3,4,5,6]
這是因為concat雖然操作的是數組，但是復制添加的不是整個數組，而是數組中的單個元素們，上述數組中的元素均為number類型，屬於基礎類型。
let arr1 = [{a:1}, {a:2}],
arr2 = [{c:3}, {d:4}];
//ES5
let arr = arr1.concat(arr2);
arr1[0]['a'] = 5;
console.log(arr); //[{a:5}, {a:2},{c:3}, {d:4}]
那我們將數組中的單個元素改為對象試試，可以看到修改arr1時會對arr數組造成影響，拓展運算符合並數組同為淺拷貝也是這個道理。
ES6入門這本書中也提到使用拓展運算符復制數組的操作，同樣需要注意當元素是復雜數組類型會存在淺拷貝的問題。
let arr = [1,2,3,4]; //以下兩種寫法復制數組等效 arr1 = [...arr]; [...arr1] = arr;
3.結合解構賦值實現快速賦值
我在ES6入門筆記第二篇中有記錄解構賦值的使用，解構賦值同樣能與數組拓展運算符結合使用，達到快速拆分數組分開賦值的目的。
let arr = [1, 2, 3, 4]; [a, ...b] = arr; a//1 b//[2,3,4]
對應位置去看，其實就是將數組第一位給了a，剩下的元素打包給了b，不難理解。
下面是數組元素不足，或者為空時使用解構賦值的情況：
let arr = []; [a, ...b] = arr; a //undefined b //[] let arr1 = ['聽風是風']; [a1, ...b1] = arr1; a1 //'聽風是風' b1 //[]
最后需要注意的一點是，如果結合解構賦值使用，拓展運算符必須寫在參數最后一位，否則會報錯。還記得嗎，...rest參數也是必須寫在函數參數最后一位。
let arr = []; [...a, b] = arr; //報錯
4.類數組轉數組
在前面已經有提過，類數組(例如nodeList，arguments)結合拓展運算符能快速轉為數組：
let P = document.querySelectorAll('p');
//獲取頁面所有p元素並修改文本內容
[...P].forEach(ele => ele.innerHTML = '聽風是風');
5.將字符串快速轉為數組
拓展運算符可以將字符串轉為字符串使用
let name = 'echo'; //ES5 let name1 = name.split(''); // ES6 let name1 = [...name]; name1 //['e','c','h','o']
6.實現了Iterator接口的對象都能使用拓展運算符
拓展運算符解析原理其實就是內部調用了目標對象的遍歷器接口（Symbol.iterator），只要具備Iterator接口的對象，都可以使用拓展運算符：
let map = new Map([ ['聽風是風', 1], ['echo', 2], ['時間跳躍', 3] ]); [...map.keys()] //['聽風是風','echo','時間跳躍']
二、Array.from()方法
1.基本用法
Array.from方法主要用途是將類數組(具有length屬性)對象，或可遍歷的對象轉為真正的數組。
我們在前面已經使用拓展運算符將類數組nodeList和arguments轉為了真正的數組，這里Array.from方法同樣能做到。你肯定會想，既然拓展運算符可以做到，為什么還要新增這個方法，因為兩者還是有區別的。
類數組對象是具有length屬性的對象，nodeList，和arguments具有length屬性的同時，其實還具有Iterator接口，所以拓展運算符才能調用Iterator接口轉換。
比如下面兩個類數組對象，都具有length屬性但不具備iterator接口，Array.from方法可以轉為數組，但拓展運算符不能做到：
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5 let arr = Array.prototype.slice.call(arrayLike); // ES6 let arr1 = Array.from(arrayLike); arr; //['a','b','c']; arr1; //['a','b','c']; //拓展運算符無法轉換不具有iterable接口的對象 [...arrayLike] //報錯arrayLike is not iterable
再如只有length屬性的類數組對象：
let obj = { length: 3 }; Array.from(obj); //[undefined,undefined,undefined] //同樣拓展運算符無法轉換 [...obj]; //報錯
2.Array.from()方法的第二個參數
Array.from()方法的第二個參數類似與數組的map方法，用於對每個元素進行處理，並將處理后的結果放入返回的數組。
let arrayLike = { '0': 1, '1': 2, '2': 3, length: 3 }; // ES6 let arr1 = Array.from(arrayLike, ele => ele + 1); //[2,3,4] // ES5 let arr2 = Array.prototype.map.call(arrayLike, ele => ele + 1); //[2,3,4] // 等同於 let arr3 = Array.from(arrayLike).map(ele => ele + 1); //[2,3,4];
比如快速生成包含10個數字1的數組：
let arrayLike = {length: 10};
let arr = Array.from(arrayLike, () => 1);
三、Arrar.of()方法
Array.of()用於將一組值轉為為數組，主要目的是彌補構造函數Array()的不足：
對於創建數組，我們常推薦數組直接量，而非使用數組構造函數創建，因為對於特殊情況會得到你不想要的值：
let arr = [3]; //[3] //構造函數的坑 let arr1 = Array(3); //[undefined,undefined，undefined] //Array.of可以彌補這點 let arr3 = Array.of(3) //[3]
如果不支持此方法，我們也可以模擬實現：
let ArrayOf = function () { if (Array.of) { return Array.of(...arguments); } else { return [].slice.call(arguments); }; }; let arr = ArrayOf(1, 2, 3); //[1,2,3]
四、數組實例新增API
此方法用於數組復制指定位置開始到指定位置結束的成員到其它位置，修改原數組並返回。
Array.prototype.copyWithin(target, start = 0, end = this.length)
·target（必需）：從該位置開始替換數據。如果為負值，表示倒數。·start（可選）：從該位置開始讀取數據，默認為 0。如果為負值，表示倒數。·end（可選）：到該位置前停止讀取數據，默認等於數組長度。如果為負值，表示倒數(也就是說復制不包含這一位)
看幾個例子：
let arr = [1, 2, 3, 4, 5]; //正數下標 0 1 2 3 4 //負數下標 -5 -4 -3 -2 -1 //從下標2開始到下標3結束，但不包含下標3的元素，所以只有元素3，並復制到下標0處替換原有的元素 [1, 2, 3, 4, 5].copyWithin(0, 2, 3); //[3,2,3,4,5] //從下標-3開始到下標-1結束,但不包含下標-1的元素，所以只有元素3,4，並復制到下標0處替換原有的元素 [1, 2, 3, 4, 5].copyWithin(0, -3, -1); //[3,4,3,4,5]
需要注意的是，在使用copyWidthin方法時，你的start元素位置必須在end元素位置左邊，否則此方法將無效：
let arr = [1, 2, 3, 4, 5]; //起始元素均在結束元素右邊，不會起作用 arr.copyWithin(0, 3, 2); //[1, 2, 3, 4, 5] arr.copyWithin(0, -1, -3); //[1, 2, 3, 4, 5]
2.find()與findIndex()
find方法在開發中使用頻率很高，它能幫你找到第一個符合條件的對象並返回，並且跳出循環，如果未找到則返回undefined。
let arr = [1, 2, 3, 4, 5]; var ele = arr.find(ele => ele > 3); ele //4
find方法的回調函數接受三個參數：
arr.find(function (ele, index, self) {});
·ele代表循環的當前項·index代表當前項的下標·self代表被循環的原數組對象
findIndex用法與find一樣，只是它會返回第一個符合條件的元素下標位置，回調函數同樣擁有三個參數，用法與find相同，這里就不做介紹了。
3.fill()方法
數組的一個填充方法，接受三個參數，分別代表填充所用元素，填充起始位置，填充結束位置(填充時不包含此位置)。
[1, 2, 3].fill('聽風是風', 1, 2); //[1,'聽風是風',3]
new Array(3).fill('echo'); //['echo','echo','echo']
前面我們有使用Array.from方法快速生成包含10個1的數組，那么到這里，你又知道了可以使用fill快速生成相同元素的數組。
需要注意的是，當我們使用fill填充的元素是對象時，會存在淺拷貝的問題，也就是說，當你填充后修改數組任意下標的對象，其它下標的元素都會改變
let arr = new Array(3).fill({ name: 'echo' }); arr[0].name = '聽風是風'; arr //[{name:'聽風是風'}，{name:'聽風是風'}，{name:'聽風是風'}]
4.keys()，value()與entries()方法
這三個方法均用於遍歷數組，這三個都返回一個遍歷器對象，可以結合for...of循環分別對數組鍵名(keys())，數組鍵值(value())，數組鍵值對(entries())進行遍歷。
let arr = [{name:'聽風是風'},{age:26},{address:'深圳'}];
for(let index of arr.keys()){
console.log(index);//0,1,2
};
for(let ele of arr.values()){
console.log(ele);//{name:'聽風是風'},{age:26},{address:'深圳'}
};
for(let [index,value] of arr.entries()){
console.log(index,value);//0 {name:'聽風是風'},1 {age:26},2 {address:'深圳'}
};
請仔細看這個例子，我原以為keys遍歷的是數組元素的name，age，adress，values遍歷出來的是聽風是風，26與深圳，其實並不是。
不要被方法名騙了，keys遍歷僅僅是數組的下標，values遍歷出來的是單個元素，entries遍歷出來的是下標與元素的對。
如果不使用for...of循環，可以使用遍歷器對象next方法進行遍歷，由於我還沒看這一章對next不太了解，這里先做個記錄。
let arr = ['a','b','c']; let index = arr.keys(); console.log(index.next().value);//0 console.log(index.next().value);//1 console.log(index.next().value);//2
5.includes方法
此方法用於判斷數組是否包含某個值，返回一個Boolean值，包含返回true，不包含則返回false。
let arr = [1,2,3]; //ES6 arr.includes(1);//true //ES5 使用indexOf,並判斷返回的索引是否大於-1 arr.indexOf(1)//0
在這個方法之前我們習慣使用indexOf查找，找到指定元素返回該元素索引，找不到返回-1。但需要注意的是，indexOf無法查找NaN這個特例：
let arr = [NaN]; arr.includes(NaN);//true arr.indexOf(NaN)//-1
我們也可以使用some方法自己模擬查找方法，
let contains = (() => Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value) )();
6.數組的flat()與flatMap()方法
flat方法可以將多維數組轉變為一維數組並返回一個新數組，不會修改原數組，也是非常的騷操作了：
let arr = [1, 2, 3, [4]]; arr.flat(); //[1,2,3,4]
那么要是數組維度超過2層怎么辦呢，flat方法接受一個參數，定義該方法要降維的層數：
let arr = [1, 2, 3, [4,[5]]]; arr.flat(2); //[1,2,3,4,5]
如果你不想知道數組嵌套了多少層，不知道這個參數定義多少，你可以直接使用infinite代替，這樣不管幾層都會被降為一維數組：
let arr = [1,[2,[3,[4,[5]]]]]; arr.flat(Infinity); //[1,2,3,4,5]
flatMap()方法對數組中每個元素執行一個回調函數(類似map方法)，然后使用返回值組成一個新數組，不會修改原數組，最后再對這個新數組執行flat方法。
需要注意的是flatMap方法最多只能展開二維數組：
let arr = [1, [2, [3, [4, [5]]]]]; let arr1 = [1, 2, 3, [4]]; //超過二維就無法解析了 let arr_ = arr.flatMap(ele => ele * 2); //[1,2,3,4,5] //二維數組還是可以正常計算 let arr1_ = arr1.flatMap(ele => ele * 2); //[1,2,3,4,5] console.log(arr_); //[2,NaN] console.log(arr1_); //[2,4,6,8] //返回的新數組確實還會被flat方法降維一次 let arr3 = [1, 2, 3]; let arr3_ = arr3.flatMap(ele => [ele * 2]); console.log(arr3_); //[2,4,6]
flatMap回調函數同樣接受三個參數，與前面find方法參數意義相同。