摘要：然而彌補(bǔ)了數(shù)組構(gòu)造函數(shù)的不足，將參數(shù)依次轉(zhuǎn)化為數(shù)組中的一項(xiàng)，然后返回這個(gè)新數(shù)組，而不管這個(gè)參數(shù)是數(shù)字還是其它，它的行為非常統(tǒng)一。方法無(wú)法識(shí)別數(shù)組的成員，但是方法可以借助方法做到。用于將嵌套的數(shù)組拉平。其中和屬于構(gòu)造函數(shù)方法。

在javascript中，數(shù)組是最重要的數(shù)據(jù)結(jié)構(gòu)，沒(méi)有之一，因?yàn)樗械臄?shù)據(jù)結(jié)構(gòu)都可以使用數(shù)組模擬和表達(dá)?？梢哉f(shuō)掌握了數(shù)組，就掌握了js與數(shù)據(jù)操作的大部分核心功能。

ES6給數(shù)組添加了一些新特性，而這些新特性到目前為止完全可以運(yùn)用到自己的業(yè)務(wù)層。

但是，開(kāi)發(fā)者初次接觸ES6，很多東西都看得云里來(lái)霧里，無(wú)從下手。在這一節(jié)中將總結(jié)有關(guān)于ES6給數(shù)組提供一些新特性的使用方法，讓用戶能夠聽(tīng)得懂，用的起來(lái)。

1、新增數(shù)組創(chuàng)建方法

1.1 Array.from

Array.from的設(shè)計(jì)目的是快速便捷把一個(gè)類似數(shù)組的可迭代對(duì)象創(chuàng)建成一個(gè)新的數(shù)組實(shí)例。

通俗的講，只要一個(gè)對(duì)象有l(wèi)ength，Array.from就能把它變成一個(gè)數(shù)組，返回新的數(shù)組，而不改變?cè)瓕?duì)象。

let likeArr = {
    "0": "a",
    "1": "b",
    "2": "c",
    length: 3
};

// ES5的寫(xiě)法
var arr1 = [].slice.call(likeArr); // ["a", "b", "c"]

// ES6的寫(xiě)法
let arr2 = Array.from(likeArr); // ["a", "b", "c"]

常見(jiàn)的類似數(shù)組的對(duì)象還有 DOM 操作返回的 NodeList 集合，以及函數(shù)內(nèi)部的 arguments 對(duì)象。Array.from都可以將它們轉(zhuǎn)為真正的數(shù)組。

// NodeList對(duì)象
let div = document.querySelectorAll("div");
console.log(div);   //  NodeList(8)?[div#cst, div, div.gb_3,?…]
console.log(Array.from(div));  //(8)?[div#cst, div, div.gb_3,?…]

// arguments對(duì)象
function foo() {
  var args = Array.from(arguments);
  console.log(args);
}
foo(1,2,34,666,333,663);  // [1, 2, 34, 666, 333, 663]

Array.from 對(duì) String，Set，Map 等擁有迭代器的對(duì)象也可以進(jìn)行轉(zhuǎn)換。

// String
Array.from("abc"); // ["a", "b", "c"]
// Set
Array.from(new Set(["abc", "def"])); // ["abc", "def"]
// Map
Array.from(new Map([[1, "abc"], [2, "def"]])); // [[1, "abc"], [2, "def"]]

此外，生成一個(gè)從0到指定數(shù)字的新數(shù)組，Array.from可以輕易的做到：

Array.from({length: 10}, (v, i) => i); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]復(fù)制代碼

Array.from 接收的第二個(gè)參數(shù)，作用類似于數(shù)組的map方法，用來(lái)對(duì)每個(gè)元素進(jìn)行處理，處理后的值放入返回的數(shù)組：

let arrayLike = [1,3,5];
Array.from(arrayLike, x => x+1);        //?[2, 4, 6]
// 等同于
Array.from(arrayLike).map(x => x+1);    //?[2, 4, 6]

1.2 Array.of

當(dāng)參數(shù)個(gè)數(shù)大于1時(shí)，Array() 才會(huì)返回由參數(shù)組成的新數(shù)組。當(dāng)參數(shù)個(gè)數(shù)只有一個(gè)時(shí)，實(shí)際上是指定數(shù)組的長(zhǎng)度。

Array() // []
Array(3) // [, , ,]
Array(3, 4, 5) // [3, 4, 5]

由于參數(shù)個(gè)數(shù)的不同，會(huì)導(dǎo)致 Array() 的行為有差異。

然而 Array.of 彌補(bǔ)了數(shù)組構(gòu)造函數(shù) Array() 的不足，Array.of 將參數(shù)依次轉(zhuǎn)化為數(shù)組中的一項(xiàng)，然后返回這個(gè)新數(shù)組，而不管這個(gè)參數(shù)是數(shù)字還是其它，它的行為非常統(tǒng)一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(3) // [3]
Array.of(3, 4, 5) // [3, 4, 5]

Array.of 總是返回參數(shù)值組成的數(shù)組。如果沒(méi)有參數(shù)，就返回一個(gè)空數(shù)組。

2、新增數(shù)組修改方法

2.1 copyWithin

可以在當(dāng)前數(shù)組內(nèi)部，將指定位置的數(shù)組項(xiàng)復(fù)制到其他位置，會(huì)覆蓋原數(shù)組項(xiàng)，然后返回當(dāng)前數(shù)組。使用該方法會(huì)修改當(dāng)前數(shù)組。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三個(gè)參數(shù)：

（1）target（必需）：從該位置開(kāi)始替換數(shù)據(jù)。如果為負(fù)值，表示倒數(shù)。

（2）start（可選）：從該位置開(kāi)始讀取數(shù)據(jù)，默認(rèn)為 0。如果為負(fù)值，表示倒數(shù)。

（3）end（可選）：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長(zhǎng)度。如果為負(fù)值，表示倒數(shù)。

這三個(gè)參數(shù)都應(yīng)該是數(shù)值，如果不是，會(huì)自動(dòng)轉(zhuǎn)為數(shù)值。

["a","b","c","d","e","f","g"].copyWithin(0, 3)
//  ["d", "e", "f", "g", "e", "f", "g"]

上面代碼表示將從 3 號(hào)位 直到數(shù)組結(jié)束的成員（"d","e","f","g"），復(fù)制到從 0 號(hào)位開(kāi)始的位置，結(jié)果覆蓋了原來(lái)的 "a" 和 "b" 。

將3號(hào)位復(fù)制到0號(hào)位，可以這么寫(xiě)：

["a","b","c","d","e","f","g"].copyWithin(0, 3, 4)
//  ["d", "b", "c", "d", "e", "f", "g"]

start、end 為負(fù)數(shù)的情況：

["a","b","c","d","e","f","g"].copyWithin(0, -3, -1)
//  ["e", "f", "c", "d", "e", "f", "g"]

start -3 指的是 "e"，-3 - （-1）=2，就是用 "e" , "f" 兩個(gè)元素替換掉從0開(kāi)頭的 "a" , "b"

2.2 fill

使用給定值，填充一個(gè)數(shù)組。

[1,2,3,4,5].fill("a");
// ["a", "a", "a", "a", "a"]

new Array(3).fill(12)
// [12, 12, 12]

fill 方法用于空數(shù)組的初始化非常方便。數(shù)組中已有的元素，會(huì)被全部抹去。

fill方法還可以接受第二個(gè)和第三個(gè)參數(shù)，用于指定填充的起始位置和結(jié)束位置。

[1,2,3,4,5].fill("a",2,4);
// [1, 2, "a", "a", 5]

fill 方法從 2 號(hào)位開(kāi)始，向原數(shù)組填充 "a"，直到 4 號(hào)位之前結(jié)束。

注意，如果填充的類型為對(duì)象，那么被賦值的是同一個(gè)內(nèi)存地址的對(duì)象，而不是深拷貝對(duì)象。

let arr = new Array(3).fill({name: "aaa"});
arr[0].name = "bbb";
console.log(arr)   // [{name: "bbb"}, {name: "bbb"}, {name: "bbb"}]

let arr = new Array(3).fill([]);
arr[0].push("ccc");
console.log(arr) // [["ccc"], ["ccc"], ["ccc"]]

3、新增數(shù)組查找遍歷方法

3.1 find 和 findIndex

find 返回?cái)?shù)組中第一個(gè)滿足條件的元素（如果有的話）， 如果沒(méi)有，則返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 4, -5, 10].find((n) => n < -10)
// undefined

find方法的回調(diào)函數(shù)可以接受三個(gè)參數(shù)，依次為當(dāng)前的值、當(dāng)前的位置和原數(shù)組。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) 
// 10

[1, 5, 10, 15].find(function(value, index, arr) {
  return console.log(value, index, arr)
}) 
 1      0     [1, 5, 10, 15]
 5      1   [1, 5, 10, 15]
 10     2   [1, 5, 10, 15]
 15     3   [1, 5, 10, 15]

數(shù)組實(shí)例的 findIndex 方法的用法與 find 方法很類似，返回第一個(gè)符合條件的數(shù)組成員的位置，如果所有成員都不符合條件，則返回 -1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) 
// 2

indexOf 方法無(wú)法識(shí)別數(shù)組的 NaN 成員，但是 findIndex 方法可以借助 Object.is 方法做到。

["a","b",NaN,"c"].indexOf(NaN)
// -1

["a","b",NaN,"c"].findIndex(y => Object.is(NaN, y))
// 2

3.2 includes

方法返回一個(gè)布爾值，表示某個(gè)數(shù)組是否包含給定的值，與字符串的 includes 方法類似。

沒(méi)有該方法之前，我們通常使用數(shù)組的 indexOf 方法，檢查是否包含某個(gè)值。

if (arr.indexOf(el) !== -1) {
    
}

indexOf 方法有兩個(gè)缺點(diǎn)：

一是不夠語(yǔ)義化，它的含義是找到參數(shù)值的第一個(gè)出現(xiàn)位置，所以要去比較是否不等于 -1，表達(dá)起來(lái)不夠直觀。

二是，它內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）進(jìn)行判斷，這會(huì)導(dǎo)致對(duì) NaN 的誤判。

[NaN].indexOf(NaN)
// -1

includes 使用的是不一樣的判斷算法，就沒(méi)有這個(gè)問(wèn)題。

[NaN].includes(NaN)
// true

includes 第二個(gè)參數(shù)表示搜索的起始位置：

["a","b","c","d"].includes("c",2)  //true
["a","b","c","d"].includes("c",3)  //false

如果第二個(gè)參數(shù)為負(fù)數(shù)，則表示從倒數(shù)第幾位向后搜索：

["a","b","c","d"].includes("c",-1)  //false     (-1指的是倒數(shù)第一位"d")
["a","b","c","d"].includes("c",-2)    //true     (-2指的是倒數(shù)第二位"c")

3.3 entries、keys、values

它們都返回一個(gè)遍歷器對(duì)象，都可以用 for...of 循環(huán)進(jìn)行遍歷。

唯一的區(qū)別是 keys 是對(duì)鍵名的遍歷、 values 是對(duì)鍵值的遍歷， entries 是對(duì)鍵值對(duì)的遍歷。

for (let index of ["a", "b", "c"].keys()) {
  console.log(index);
}
// 0
// 1
// 2

for (let elem of ["a", "b", "c"].values()) {
  console.log(elem);
}
// "a"
// "b"
// "c"

for (let [index, elem] of ["a", "b", "c"].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"
// 2 "c"

4、數(shù)組降維方法

4.1 flat

說(shuō)到數(shù)組拍平，我們先看一道阿里面試題：

編寫(xiě)一個(gè) JavaScript 函數(shù)，接受一個(gè)僅包含數(shù)字的 多維數(shù)組 ，返回拍平以后的結(jié)果。例如傳入：[1, [[2], 3, 4], 5]，返回 [1, 2, 3, 4, 5]。

（本題來(lái)源：阿里巴巴前端筆試題）

const arr = [1, [[2], 3, 4], 5];

const flatten = arr => {
  return arr.reduce((flat, toFlat) => {
    return flat.concat(Array.isArray(toFlat) ? flatten(toFlat) : toFlat);
  }, []);
};

const res = flatten(arr);

console.log(res);

OK,我知道你覺(jué)得它太復(fù)雜，我這里只是展示一下數(shù)組拍平的應(yīng)用場(chǎng)景，接下來(lái)，我們?cè)敿?xì)說(shuō)說(shuō)關(guān)于數(shù)組拍平的知識(shí)。

flat用于將嵌套的數(shù)組“拉平”。該方法返回一個(gè)新數(shù)組，對(duì)原數(shù)據(jù)沒(méi)有影響。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

默認(rèn)只會(huì)“拉平”一層，如果想要“拉平”多層的嵌套數(shù)組，可以將flat方法的參數(shù)寫(xiě)成一個(gè)整數(shù)，表示想要拉平的層數(shù)，默認(rèn)為1。

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

如果數(shù)組嵌套的層數(shù)不固定怎么辦？把flat里的參數(shù)寫(xiě)成1000或者100000？

這樣寫(xiě)太死板了，可以聯(lián)想到 Infinity （無(wú)窮大）啊。

不管有多少層嵌套，如果都要轉(zhuǎn)成一維數(shù)組，可以用 Infinity 關(guān)鍵字作為參數(shù)。

[1, [2, [3, [4]]]].flat(Infinity)
// [1, 2, 3, 4]

4.2 flatMap

方法對(duì)原數(shù)組的每個(gè)成員執(zhí)行一個(gè)函數(shù)（相當(dāng)于執(zhí)行 Array.prototype.map），然后對(duì)返回值組成的數(shù)組執(zhí)行 flat() 方法。該方法返回一個(gè)新數(shù)組，不改變?cè)瓟?shù)組。

[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
// 相當(dāng)于 [[2, 4], [3, 6], [4, 8]].flat()

注意：flatMap() 只能展開(kāi)一層數(shù)組。

5、總結(jié)

數(shù)組新增的方法，一方面起到了增強(qiáng)型作用，一方面讓代碼變得更加簡(jiǎn)潔。

其中 Array.from 和 Array.of 屬于構(gòu)造函數(shù)方法。

從是否改變數(shù)組自身的角度看：

copyWithin、fill 會(huì)改變數(shù)組自身，

includes、flat、flatMap不會(huì)改變數(shù)組自身。

entries、keys、values、find、findeIndex屬于數(shù)組遍歷方法。