es6入門6--數組拓展運算符，Array.from()基本用法

本文只是做爲ES6入門第九章學習筆記，在整理知識點的同時，會加入部分我的思考與解答，若想知道更詳細的介紹，還請閱讀阮一峯大神的ES6入門

1、拓展運算符

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]);

 2、拓展運算符的做用

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','時間跳躍']

2、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);

3、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]

4、數組實例新增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方法參數意義相同。