ES6數(shù)組的擴(kuò)展

1，擴(kuò)展運(yùn)算符

...將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列

console.log(...[1, 2, 3]) // 1 2 3
console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

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

function add(x, y) {
  return x + y
}
const numbers = [4, 38]
add(...numbers) // 42

2浮驳，替代函數(shù)的apply方法

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

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

// ES6的寫(xiě)法
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ù)組最大元素的寫(xiě)法泼各。

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

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

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

另外一個(gè)例子是通過(guò)push函數(shù)鞍时，將一個(gè)數(shù)組添加到另一個(gè)數(shù)組的尾部

// ES5的 寫(xiě)法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
arr1 // [0,1,2,3,4,5]

// ES6 的寫(xiě)法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
arr1 // [0,1,2,3,4,5]

3, 拓展運(yùn)算符的應(yīng)用

1，復(fù)制數(shù)組
數(shù)組是復(fù)合的數(shù)據(jù)類型扣蜻，直接復(fù)制的話逆巍，只是復(fù)制了指向底層數(shù)據(jù)結(jié)構(gòu)的指針，而不是克隆一個(gè)全新的數(shù)組

const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1

arr2[0] = 10
console.log(arr1)
console.log(arr2)

image

arr2并不是arr1的克隆莽使，而是指向同一份數(shù)據(jù)的另一個(gè)指針锐极。修改arr2，會(huì)直接導(dǎo)致arr1改變

ES5只能用變通方法來(lái)復(fù)制數(shù)組

const arr1 = [1, 2]
const arr2 = arr1.concat()
arr2[0] = 30
console.log(arr1)
console.log(arr2)

image

上面代碼芳肌，arr1會(huì)返回原數(shù)組的克隆灵再，再修改arr2就不會(huì)對(duì)arr1產(chǎn)生影響了

拓展運(yùn)算符提供了復(fù)制數(shù)組的簡(jiǎn)便方法：

const a1 = [1,2]
const a2 = [...a1]

// 寫(xiě)法二
const a1 = [1,2]
const [...a2] = a1

上面的兩種寫(xiě)法,a2都是a1的克隆

2肋层，合并數(shù)組

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并數(shù)組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并數(shù)組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

不過(guò)，這兩種方法都是淺拷貝翎迁，使用時(shí)需要注意

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];

const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];

a3[0] === a1[0] // true
a4[0] === a1[0] // true

上面代碼,a3和a4是兩種不同方法合并而成的新數(shù)組栋猖，但是他們的成員都是對(duì)原數(shù)組成員的引用，這就是淺拷貝鸳兽。如果修改了引用指向的值掂铐，會(huì)同步反映到新數(shù)組。

3揍异，與解構(gòu)賦值結(jié)合

擴(kuò)展運(yùn)算符可以和解構(gòu)賦值結(jié)合起來(lái)全陨，用于生成數(shù)組

ES5 
let list = [1, 2, 3]
let a = list[0],
  rest = list.slice(1)
console.log(a)  // 1
console.log(rest) // [2,3]


ES6
let list = [1, 2, 3];
[a, ...rest] = list
console.log(a) // 1
console.log(rest) // [2,3]

4, 字符串

擴(kuò)展運(yùn)算符還可以將字符串轉(zhuǎn)為真正的數(shù)組

[...'hello']  // ["h", "e", "l", "l", "o"]

5, 實(shí)現(xiàn)了 Iterator 接口的對(duì)象
任何定義了遍歷器（Iterator）接口的對(duì)象（參閱 Iterator 一章），都可以用擴(kuò)展運(yùn)算符轉(zhuǎn)為真正的數(shù)組衷掷。

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

上面代碼中辱姨，querySelectorAll方法返回的是一個(gè)NodeList對(duì)象。它不是數(shù)組戚嗅，而是一個(gè)類似數(shù)組的對(duì)象雨涛。這時(shí)，擴(kuò)展運(yùn)算符可以將其轉(zhuǎn)為真正的數(shù)組懦胞，原因就在于NodeList對(duì)象實(shí)現(xiàn)了 Iterator 替久。

Number.prototype[Symbol.iterator] = function*() {
  let i = 0;
  let num = this.valueOf();
  while (i < num) {
    yield i++;
  }
}
console.log([...5]) // [0, 1, 2, 3, 4]

上面代碼中，先定義了Number對(duì)象的遍歷器接口躏尉，擴(kuò)展運(yùn)算符將5自動(dòng)轉(zhuǎn)成Number實(shí)例以后蚯根，就會(huì)調(diào)用這個(gè)接口，就會(huì)返回自定義的結(jié)果胀糜。

對(duì)于那些沒(méi)有部署 Iterator 接口的類似數(shù)組的對(duì)象颅拦，擴(kuò)展運(yùn)算符就無(wú)法將其轉(zhuǎn)為真正的數(shù)組。

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

上面代碼中教藻，arrayLike是一個(gè)類似數(shù)組的對(duì)象距帅，但是沒(méi)有部署 Iterator 接口，擴(kuò)展運(yùn)算符就會(huì)報(bào)錯(cuò)括堤。這時(shí)碌秸，可以改為使用Array.from方法將arrayLike轉(zhuǎn)為真正的數(shù)組。

6, Map 和 Set 結(jié)構(gòu)悄窃，Generator 函數(shù)

擴(kuò)展運(yùn)算符內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的 Iterator 接口哮肚，因此只要具有 Iterator 接口的對(duì)象，都可以使用擴(kuò)展運(yùn)算符广匙，比如 Map 結(jié)構(gòu)允趟。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

Generator 函數(shù)運(yùn)行后，返回一個(gè)遍歷器對(duì)象鸦致，因此也可以使用擴(kuò)展運(yùn)算符潮剪。

const go = function*(){
  yield 1;
  yield 2;
  yield 3;
};

[...go()] // [1, 2, 3]

4, Array.from()

Array.from()方法用于將類似于數(shù)組的對(duì)象和可遍歷的對(duì)象轉(zhuǎn)為真正的數(shù)組

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
}

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

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

實(shí)際應(yīng)用中涣楷，常見(jiàn)的類似數(shù)組的對(duì)象是DOM操作返回的NodeList集合，以及函數(shù)內(nèi)部的arguments對(duì)象抗碰，Array.from()都可以將他們轉(zhuǎn)為真正的數(shù)組

// NodeList對(duì)象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});

// arguments對(duì)象
function foo() {
  var args = Array.from(arguments);
  // ...
}

上面代碼中狮斗，querySelectorAll方法返回的是一個(gè)類似數(shù)組的對(duì)象，可以將這個(gè)對(duì)象轉(zhuǎn)為真正的數(shù)組弧蝇，再使用filter方法碳褒。

如果參數(shù)是一個(gè)真正的數(shù)組，Array.from會(huì)返回一個(gè)一模一樣的新數(shù)組看疗。

Array.from([1, 2, 3])  // [1, 2, 3]

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

let a = '123'
let b = [...a]  // ['1', '2', '3']
字符串?dāng)?shù)字?jǐn)?shù)組轉(zhuǎn)為數(shù)字?jǐn)?shù)組
b.map(Number)  // [1, 2, 3]

Array.from還可以接受第二個(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]

下面的例子是取出一組 DOM 節(jié)點(diǎn)的文本內(nèi)容怖辆。

let spans = document.querySelectorAll('span.name');

// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);

// Array.from()
let names2 = Array.from(spans, s => s.textContent)

下面的例子將數(shù)組中布爾值為false的成員轉(zhuǎn)為0

Array.from([1, , 2, , 3], (n) => n || 0)   // [1, 0, 2, 0, 3]

5, 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()基本上可以替代Array()或new Array()竖螃，并且不存在由于參數(shù)不同而導(dǎo)致的重載淑廊。他的行為非常統(tǒng)一

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

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

6, 數(shù)組實(shí)例的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 > 100) // undefined

[1, 5, 10, 15].find(function(value, index, arr) {
  // value:當(dāng)前的值 index: 當(dāng)前索引  arr: 原數(shù)組
  return value > 9;
}) // 10

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

[1, 4, -5, 10].findIndex((n) => n > 100)  // -1

7, 數(shù)組實(shí)例的fill()

fill()方法使用給定值填充一個(gè)數(shù)組

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

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

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

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

8, 數(shù)組實(shí)例的entries()、keys()绳匀、values()

keys()是鍵名的遍歷芋忿。

entries()是鍵值對(duì)的遍歷

values()是鍵值的遍歷

for (let i of ['a', 'b']) {
  console.log(i) // a b
}

// keys()
for (let i of ['a', 'b'].keys()) {
  console.log(i) // 0 1
}

// entries()
for (let i of ['a', 'b'].entries()) {
  console.log(i)  // [0, "a"] [1, 'b']
}

// values()
for (let i of ['a', 'b'].values()) {
  console.log(i) // a b
}

如果不使用for...of循環(huán)，可以手動(dòng)調(diào)用遍歷器對(duì)象的next方法疾棵，進(jìn)行遍歷

let arr = ['a', 'b']
console.log(arr.keys().next().value) // 0
console.log(arr.keys().next().value) // 1

9,數(shù)組實(shí)例的includes()

Array.prototype.includes方法返回一個(gè)布爾值戈钢，表示某個(gè)數(shù)組是否包含給定的值，與字符串的includes方法類似陋桂。ES2016 引入了該方法逆趣。

console.log([1, 2, 3].includes(2))  // true
console.log([1, 2, 3].includes(200))  // false

該方法的第二個(gè)參數(shù)表示搜索的起始位置，默認(rèn)為0嗜历。如果第二個(gè)參數(shù)為負(fù)數(shù)宣渗，則表示倒數(shù)的位置

[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

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

[NaN].includes(NaN) // true

10, 數(shù)組實(shí)例的flat()瀑志、flatMap()

數(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ù)寫(xiě)成一個(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]

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

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

flatMap()只能展開(kāi)一層數(shù)組咳榜。

[1, 2, 3, 4].flatMap(x => [[x * 2]])  // [[2], [4], [6], [8]]

遍歷函數(shù)返回的是一個(gè)雙層的數(shù)組夏醉，但是默認(rèn)只能展開(kāi)一層，因此flatMap()返回的還是一個(gè)嵌套數(shù)組

11,數(shù)組的空位

數(shù)組的空位指的是數(shù)組的某一個(gè)位置沒(méi)有任何值涌韩，比如畔柔，Array構(gòu)造函數(shù)返回的數(shù)組都是空位

Array(3) // [, , ,]

Array(3)返回一個(gè)具有 3 個(gè)空位的數(shù)組。

空位不是undefined臣樱，一個(gè)位置的值等于undefined靶擦，依然是有值的」秃粒空位是沒(méi)有任何值玄捕，in運(yùn)算符可以說(shuō)明這一點(diǎn)。

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false

上面代碼棚放，第一個(gè)數(shù)組的0號(hào)位置是有值的枚粘，第二個(gè)數(shù)組的0號(hào)位置沒(méi)有值

ES5 對(duì)空位的處理，已經(jīng)很不一致了席吴，大多數(shù)情況下會(huì)忽略空位。

• forEach(), filter(), reduce(), every() 和some()都會(huì)跳過(guò)空位捞蛋。
• map()會(huì)跳過(guò)空位孝冒，但會(huì)保留這個(gè)值
• join()和toString()會(huì)將空位視為undefined，而undefined和null會(huì)被處理成空字符串拟杉。

// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1

// filter方法
['a',,'b'].filter(x => true) // ['a','b']

// every方法
[,'a'].every(x => x==='a') // true

// reduce方法
[1,,2].reduce((x,y) => x+y) // 3

// some方法
[,'a'].some(x => x !== 'a') // false

// map方法
[,'a'].map(x => 1) // [,1]

// join方法
[,'a',undefined,null].join('#') // "#a##"

// toString方法
[,'a',undefined,null].toString() // ",a,,"

ES6 則是明確將空位轉(zhuǎn)為undefined

Array.from方法會(huì)將數(shù)組的空位庄涡，轉(zhuǎn)為undefined，也就是說(shuō)搬设，這個(gè)方法不會(huì)忽略空位穴店。

Array.from(['a',,'b'])
// [ "a", undefined, "b" ]

擴(kuò)展運(yùn)算符（...）也會(huì)將空位轉(zhuǎn)為undefined

[...['a',,'b']]
// [ "a", undefined, "b" ]

fill()會(huì)將空位視為正常的數(shù)組位置

new Array(3).fill('a') // ["a","a","a"]

for...of循環(huán)也會(huì)遍歷空位撕捍。

let arr = [, ,];
for (let i of arr) {
  console.log(1);
}
// 1
// 1

上面代碼中，數(shù)組arr有兩個(gè)空位泣洞，for...of并沒(méi)有忽略它們忧风。如果改成map方法遍歷，空位是會(huì)跳過(guò)的球凰。

entries()狮腿、keys()、values()呕诉、find()和findIndex()會(huì)將空位處理成undefined缘厢。

// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]

// keys()
[...[,'a'].keys()] // [0,1]

// values()
[...[,'a'].values()] // [undefined,"a"]

// find()
[,'a'].find(x => true) // undefined

// findIndex()
[,'a'].findIndex(x => true) // 0

由于空位的處理規(guī)則非常不統(tǒng)一，所以建議避免出現(xiàn)空位甩挫。