阮一峰
數(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)算符可以展開(kāi)數(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)算符就沒(méi)有這個(gè)問(wèn)題渤滞。因此贬墩，正確返回字符串長(zhǎng)度的函數(shù)，可以像下面這樣寫蔼水。

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

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

凡是涉及到操作四個(gè)字節(jié)的 Unicode 字符的函數(shù)震糖，都有這個(gè)問(wèn)題。因此趴腋，最好都用擴(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ì)象沒(méi)有部署這個(gè)接口，就無(wú)法轉(zhuǎn)換眉抬。Array.from()方法還支持類似數(shù)組的對(duì)象贯吓。所謂類似數(shù)組的對(duì)象，本質(zhì)特征只有一點(diǎn)蜀变，即必須有l(wèi)ength屬性悄谐。因此，任何有l(wèi)ength屬性的對(duì)象库北，都可以通過(guò)Array.from()方法轉(zhuǎn)為數(shù)組爬舰，而此時(shí)擴(kuò)展運(yùn)算符就無(wú)法轉(zhuǎn)換。

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

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

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

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

2. Array.from()還可以接受一個(gè)函數(shù)作為第二個(gè)參數(shù)喂很，作用類似于數(shù)組的map()方法蜡镶，用來(lái)對(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ù)钧惧，用來(lái)綁定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ù)組巴席。也就是說(shuō)，使用這個(gè)方法诅需，會(huì)修改當(dāng)前數(shù)組。

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

target（必需）：從該位置開(kāi)始替換數(shù)據(jù)堰塌。如果為負(fù)值，表示倒數(shù)分衫。
start（可選）：從該位置開(kāi)始讀取數(shù)據(jù)场刑，默認(rèn)為 0。如果為負(fù)值蚪战，表示從末尾開(kāi)始計(jì)算牵现。
end（可選）：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長(zhǎng)度邀桑。如果為負(fù)值瞎疼，表示從末尾開(kāi)始計(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)位開(kāi)始的位置太抓，結(jié)果覆蓋了原來(lái)的 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ì)于沒(méi)有部署 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的成員机打，然后返回該成員矫户。如果沒(méi)有符合條件的成員，則返回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ù)，用來(lái)綁定回調(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方法無(wú)法識(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)位開(kāi)始专筷，向原數(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開(kāi)始爆班。

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

沒(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
[NaN].includes(NaN)
// true

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

下面代碼用來(lái)檢查當(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方法锥债，是用來(lái)查找鍵名的陡蝇，比如Map.prototype.has(key)、WeakMap.prototype.has(key)哮肚、Reflect.has(target, propertyKey)登夫。
Set 結(jié)構(gòu)的has方法靖避，是用來(lái)查找值的狈茉，比如Set.prototype.has(value)、WeakSet.prototype.has(value)企孩。

8.flat()

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

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

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ì)跳過(guò)空位。

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