阮一峰
數(shù)組的拓展： https://es6.ruanyifeng.com/#docs/array

1.拓展運(yùn)算符

擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...）。它好比 rest 參數(shù)的逆運(yùn)算，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。 任何定義了遍歷器（Iterator）接口的對(duì)象，都可以用擴(kuò)展運(yùn)算符轉(zhuǎn)為真正的數(shù)組。

1.1該運(yùn)算符主要用于函數(shù)調(diào)用。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

上面代碼中，array.push(...items)和add(...numbers)這兩行，都是函數(shù)的調(diào)用，它們都使用了擴(kuò)展運(yùn)算符。該運(yùn)算符將一個(gè)數(shù)組，變?yōu)閰?shù)序列。

擴(kuò)展運(yùn)算符后面還可以放置表達(dá)式。

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

如果擴(kuò)展運(yùn)算符后面是一個(gè)空數(shù)組，則不產(chǎn)生任何效果。

[...[], 1]
// [1]

注意，只有函數(shù)調(diào)用時(shí)，擴(kuò)展運(yùn)算符才可以放在圓括號(hào)中，否則會(huì)報(bào)錯(cuò)。

(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1, 2])
// 1 2

上面三種情況，擴(kuò)展運(yùn)算符都放在圓括號(hào)里面，但是前兩種情況會(huì)報(bào)錯(cuò)，因?yàn)閿U(kuò)展運(yùn)算符所在的括號(hào)不是函數(shù)調(diào)用。

1.2替代函數(shù)的apply() 方法

由于擴(kuò)展運(yùn)算符可以展開數(shù)組，所以不再需要apply()方法將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)了。

// ES5 的寫法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6 的寫法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

下面是擴(kuò)展運(yùn)算符取代apply()方法的一個(gè)實(shí)際的例子，應(yīng)用Math.max()方法，簡(jiǎn)化求出一個(gè)數(shù)組最大元素的寫法。

// ES5 的寫法
Math.max.apply(null, [14, 3, 77])

// ES6 的寫法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

擴(kuò)展運(yùn)算符還可以將字符串轉(zhuǎn)為真正的數(shù)組，能夠正確識(shí)別四個(gè)字節(jié)的 Unicode 字符。

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

上面代碼的第一種寫法，JavaScript 會(huì)將四個(gè)字節(jié)的 Unicode 字符，識(shí)別為 2 個(gè)字符，采用擴(kuò)展運(yùn)算符就沒有這個(gè)問題。因此，正確返回字符串長(zhǎng)度的函數(shù)，可以像下面這樣寫。

function length(str) {
  return [...str].length;
}

length('x\uD83D\uDE80y') // 3

凡是涉及到操作四個(gè)字節(jié)的 Unicode 字符的函數(shù)，都有這個(gè)問題。因此，最好都用擴(kuò)展運(yùn)算符改寫。

let str = 'x\uD83D\uDE80y';

str.split('').reverse().join('')
// 'y\uDE80\uD83Dx'

[...str].reverse().join('')
// 'y\uD83D\uDE80x'

上面代碼中，如果不用擴(kuò)展運(yùn)算符，字符串的reverse()操作就不正確。

1.Array.from()

Array.from()方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對(duì)象（array-like object）和可遍歷（iterable）的對(duì)象（包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map）。

值得提醒的是，擴(kuò)展運(yùn)算符（...）也可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組。

// arguments對(duì)象
function foo() {
  const args = [...arguments];
}

// NodeList對(duì)象
[...document.querySelectorAll('div')]

擴(kuò)展運(yùn)算符背后調(diào)用的是遍歷器接口（Symbol.iterator），如果一個(gè)對(duì)象沒有部署這個(gè)接口，就無法轉(zhuǎn)換。Array.from()方法還支持類似數(shù)組的對(duì)象。所謂類似數(shù)組的對(duì)象，本質(zhì)特征只有一點(diǎn)，即必須有l(wèi)ength屬性。因此，任何有l(wèi)ength屬性的對(duì)象，都可以通過Array.from()方法轉(zhuǎn)為數(shù)組，而此時(shí)擴(kuò)展運(yùn)算符就無法轉(zhuǎn)換。

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

上面代碼中，Array.from()返回了一個(gè)具有三個(gè)成員的數(shù)組，每個(gè)位置的值都是undefined。擴(kuò)展運(yùn)算符轉(zhuǎn)換不了這個(gè)對(duì)象。

對(duì)于還沒有部署該方法的瀏覽器，可以用Array.prototype.slice()方法替代。

const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

2. Array.from()還可以接受一個(gè)函數(shù)作為第二個(gè)參數(shù)，作用類似于數(shù)組的map()方法，用來對(duì)每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數(shù)組。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

下面的例子將數(shù)組中布爾值為false的成員轉(zhuǎn)為0。
Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

下面一個(gè)例子是返回各種數(shù)據(jù)的類型。
function typesOf () {
  return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']

Array.from()可以將各種值轉(zhuǎn)為真正的數(shù)組，并且還提供map功能。這實(shí)際上意味著，只要有一個(gè)原始的數(shù)據(jù)結(jié)構(gòu)，你就可以先對(duì)它的值進(jìn)行處理，然后轉(zhuǎn)成規(guī)范的數(shù)組結(jié)構(gòu)，進(jìn)而就可以使用數(shù)量眾多的數(shù)組方法。

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']

上面代碼中，Array.from()的第一個(gè)參數(shù)指定了第二個(gè)參數(shù)運(yùn)行的次數(shù)。這種特性可以讓該方法的用法變得非常靈活。

如果map()函數(shù)里面用到了this關(guān)鍵字，還可以傳入Array.from()的第三個(gè)參數(shù)，用來綁定this。

3.Array.of()

Array.of()方法用于將一組值，轉(zhuǎn)換為數(shù)組。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

這個(gè)方法的主要目的，是彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足。因?yàn)閰?shù)個(gè)數(shù)的不同，會(huì)導(dǎo)致Array()的行為有差異。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

Array.of()方法可以用下面的代碼模擬實(shí)現(xiàn)。

function ArrayOf(){
  return [].slice.call(arguments);
}

4. copyWithin()

數(shù)組實(shí)例的copyWithin()方法，在當(dāng)前數(shù)組內(nèi)部，將指定位置的成員復(fù)制到其他位置（會(huì)覆蓋原有成員），然后返回當(dāng)前數(shù)組。也就是說，使用這個(gè)方法，會(huì)修改當(dāng)前數(shù)組。

Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三個(gè)參數(shù)。

target（必需）：從該位置開始替換數(shù)據(jù)。如果為負(fù)值，表示倒數(shù)。
start（可選）：從該位置開始讀取數(shù)據(jù)，默認(rèn)為 0。如果為負(fù)值，表示從末尾開始計(jì)算。
end（可選）：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長(zhǎng)度。如果為負(fù)值，表示從末尾開始計(jì)算。
這三個(gè)參數(shù)都應(yīng)該是數(shù)值，如果不是，會(huì)自動(dòng)轉(zhuǎn)為數(shù)值。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
上面代碼表示將從 3 號(hào)位直到數(shù)組結(jié)束的成員（4 和 5），復(fù)制到從 0 號(hào)位開始的位置，結(jié)果覆蓋了原來的 1 和 2。

下面是更多例子。

// 將3號(hào)位復(fù)制到0號(hào)位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相當(dāng)于3號(hào)位，-1相當(dāng)于4號(hào)位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 將3號(hào)位復(fù)制到0號(hào)位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 將2號(hào)位到數(shù)組結(jié)束，復(fù)制到0號(hào)位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 對(duì)于沒有部署 TypedArray 的 copyWithin 方法的平臺(tái)
// 需要采用下面的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

5. find() 和 findIndex()

數(shù)組實(shí)例的find方法，用于找出第一個(gè)符合條件的數(shù)組成員。它的參數(shù)是一個(gè)回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)，直到找出第一個(gè)返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。

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

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

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

這兩個(gè)方法都可以接受第二個(gè)參數(shù)，用來綁定回調(diào)函數(shù)的this對(duì)象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

上面的代碼中，find函數(shù)接收了第二個(gè)參數(shù)person對(duì)象，回調(diào)函數(shù)中的this對(duì)象指向person對(duì)象。

另外，這兩個(gè)方法都可以發(fā)現(xiàn)NaN，彌補(bǔ)了數(shù)組的indexOf方法的不足。

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

[NaN].findIndex(y => Object.is(NaN, y))
// 0

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

6. fill()

fill方法使用給定值，填充一個(gè)數(shù)組。 fill方法用于空數(shù)組的初始化非常方便。數(shù)組中已有的元素，會(huì)被全部抹去。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

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

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

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
上面代碼表示，fill方法從 1 號(hào)位開始，向原數(shù)組填充 7，到 2 號(hào)位之前結(jié)束。

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

let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]

7. includes()

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

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true
該方法的第二個(gè)參數(shù)表示搜索的起始位置，默認(rèn)為0。如果第二個(gè)參數(shù)為負(fù)數(shù)，則表示倒數(shù)的位置，如果這時(shí)它大于數(shù)組長(zhǎng)度（比如第二個(gè)參數(shù)為-4，但數(shù)組長(zhǎng)度為3），則會(huì)重置為從0開始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

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

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

indexOf方法有兩個(gè)缺點(diǎn)，一是不夠語義化，它的含義是找到參數(shù)值的第一個(gè)出現(xiàn)位置，所以要去比較是否不等于-1，表達(dá)起來不夠直觀。二是，它內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）進(jìn)行判斷，這會(huì)導(dǎo)致對(duì)NaN的誤判。

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

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

下面代碼用來檢查當(dāng)前環(huán)境是否支持該方法，如果不支持，部署一個(gè)簡(jiǎn)易的替代版本。

const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(['foo', 'bar'], 'baz'); // => false

另外，Map 和 Set 數(shù)據(jù)結(jié)構(gòu)有一個(gè)has方法，需要注意與includes區(qū)分。

Map 結(jié)構(gòu)的has方法，是用來查找鍵名的，比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。
Set 結(jié)構(gòu)的has方法，是用來查找值的，比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

8.flat()

數(shù)組的成員有時(shí)還是數(shù)組，Array.prototype.flat()用于將嵌套的數(shù)組“拉平”，變成一維的數(shù)組。該方法返回一個(gè)新數(shù)組，對(duì)原數(shù)據(jù)沒有影響。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
上面代碼中，原數(shù)組的成員里面有一個(gè)數(shù)組，flat()方法將子數(shù)組的成員取出來，添加在原來的位置。

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

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

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
上面代碼中，flat()的參數(shù)為2，表示要“拉平”兩層的嵌套數(shù)組。

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

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
如果原數(shù)組有空位，flat()方法會(huì)跳過空位。

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