一孽尽、擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符是三個(gè)點(diǎn)...。它好比rest 參數(shù)的逆運(yùn)算忧勿，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列杉女。
console.log(...[1, 2, 3])
// 1 2 3
擴(kuò)展運(yùn)算符可以與函數(shù)參數(shù)結(jié)合使用，較為靈活：
function f(v, w, x, y, z) { }
const args = [0, 1]
f(-1, ...args, 2, ...[3])
擴(kuò)展運(yùn)算符后面還可以寫表達(dá)式：
const arr = [
...(x > 0 ? ['a'] : [])
'b'
]
下面介紹擴(kuò)展運(yùn)算符的幾種用法
1. 替代apply方法
由于擴(kuò)展運(yùn)算符可以展開數(shù)組鸳吸，所以就不需要apply方法了熏挎，我們可以直接將數(shù)組當(dāng)做參數(shù)傳入函數(shù)中，比如：
// ES5 的寫法
Math.max.apply(null, [14, 3, 77])
// ES6 的寫法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
2. 復(fù)制數(shù)組
當(dāng)然晌砾，這里也只是復(fù)制了數(shù)組的指針而非真正的復(fù)制坎拐。
// ES5寫法
var a = [1,2,3]
var b = a.concat()
// ES6寫法
var a = [1,2,3]
var b = [...a]
// 也可以這么寫，利用了解構(gòu)賦值
vat [...b] = a
3. 合并數(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' ]
4. 與解構(gòu)賦值結(jié)合使用
擴(kuò)展運(yùn)算符可以與解構(gòu)賦值結(jié)合起來，用于生成數(shù)組呕乎。
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
const [first, ...rest] = [];
first // undefined
rest // []
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
值得注意的是积担，擴(kuò)展運(yùn)算符必須放在參數(shù)的最后一位，否則會(huì)報(bào)錯(cuò)猬仁，這里我把它也理解為rest帝璧，即擴(kuò)展運(yùn)算符已經(jīng)代表剩下的部分了，如果后面再有參數(shù)湿刽，也沒法再?gòu)?fù)制了的烁，會(huì)造成不完全解構(gòu)。
5. 字符串的轉(zhuǎn)換
擴(kuò)展運(yùn)算符可以把字符串轉(zhuǎn)為真正的數(shù)組叭爱，以前在使用python的時(shí)候撮躁，我們可以通過list()輕易的將一個(gè)字符串轉(zhuǎn)為數(shù)組，但是在JavaScript中就比較困難了
a = 'string'
b = []
for (let i in a) {
b.push(a[i])
}
console.log(b) // ["s", "t", "r", "i", "n", "g"]
但是如果使用擴(kuò)展運(yùn)算符就會(huì)變得非常簡(jiǎn)單
a = [...'string']
console.log(a) // ["s", "t", "r", "i", "n", "g"]
這種寫法還有一個(gè)非常棒的地方就是能夠正確識(shí)別四個(gè)字節(jié)的Unicode字符买雾。
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
6. 部署了Iterator接口的對(duì)象的轉(zhuǎn)換
任何定義了遍歷器（Iterator）接口的對(duì)象）把曼，都可以用擴(kuò)展運(yùn)算符轉(zhuǎn)為真正的數(shù)組。
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ì)于沒有部署Iterator接口的對(duì)象老客，擴(kuò)展運(yùn)算符無法將其轉(zhuǎn)換為數(shù)組，而是會(huì)報(bào)錯(cuò)震叮。
二胧砰、Array.from()
1. 數(shù)組的生成和轉(zhuǎn)換
Array.from方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對(duì)象（array-like object）和可遍歷（iterable）的對(duì)象（包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu)Set和Map）。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
總的來說只要是部署Iterator接口的對(duì)象苇瓣，都可以被Array.from()轉(zhuǎn)為真正的數(shù)組尉间，前面提到擴(kuò)展運(yùn)算符也有相同的作用，那么兩者的區(qū)別在哪里呢：區(qū)別在于擴(kuò)展運(yùn)算符背后調(diào)用的是遍歷器接口（Symbol.iterator）击罪，如果一個(gè)對(duì)象沒有部署這個(gè)接口哲嘲，就無法轉(zhuǎn)換。Array.from方法還支持類似數(shù)組的對(duì)象媳禁。所謂類似數(shù)組的對(duì)象眠副，本質(zhì)特征只有一點(diǎn)，即必須有length屬性竣稽。因此囱怕，任何有length屬性的對(duì)象，都可以通過Array.from方法轉(zhuǎn)為數(shù)組丧枪，而此時(shí)擴(kuò)展運(yùn)算符就無法轉(zhuǎn)換光涂。
obj = {
'0':'name',
'1':'age',
'3':'tel',
'length':5
}
[...obj] // Uncaught TypeError: object is not iterable
Array.from(obj) // ["name", "age", undefined, "tel", undefined]
我們可以用該方法生成長(zhǎng)度固定的數(shù)組：
Array.from({ length: 3 }) // [ undefined, undefined, undefined ]
2. Array.from()的回調(diào)函數(shù)
Array.from還可以接受第二個(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ù)組中的undefined轉(zhuǎn)為0:
Array.from([1,2,3,undefined,5], item => item || 0) // [1, 2, 3, 0, 5]
如果map函數(shù)里面用到了this關(guān)鍵字，還可以傳入Array.from的第三個(gè)參數(shù)私恬，用來綁定this债沮。
三、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()的行為有差異蔬崩。比如：
arr = new Array(3) // [empty × 3]
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]
四署咽、find()和findIndex()
數(shù)組實(shí)例的find方法近顷，用于找出第一個(gè)符合條件的數(shù)組成員生音。它的參數(shù)是一個(gè)回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)窒升，直到找出第一個(gè)返回值為true的成員缀遍，然后返回該成員。如果沒有符合條件的成員饱须，則返回undefined域醇。類似于filter，只不過是filter會(huì)把所有符合條件的值都找出來冤寿，而find只找到第一個(gè)
[1, 4, -5, 10].find((n) => n < 0) // -5
[1, 4, -5, 10].filter((n) => n < 0) // [-5]
find方法的回調(diào)函數(shù)可以接受三個(gè)參數(shù)歹苦，依次為當(dāng)前的值、當(dāng)前的位置和原數(shù)組督怜。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
數(shù)組實(shí)例的findIndex方法的用法與find方法非常類似殴瘦，返回第一個(gè)符合條件的數(shù)組成員的位置，如果所有成員都不符合條件号杠，則返回-1蚪腋。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
這兩個(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
五屉凯、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ì)算丽啡。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
六、fill()方法
fill方法使用給定值硬猫，填充一個(gè)數(shù)組补箍。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
該方法可以用來初始化數(shù)組改执，比如：
let arr = new Array(3).fill('jack')
console.log(arr) // ["jack", "jack", "jack"]
當(dāng)然我們亦可以通過其他方法初始化數(shù)組，比如：
let arr = Array.from({length:3}, () => 'jack')
console.log(arr) // ["jack", "jack", "jack"]
fill方法還可以接受第二個(gè)和第三個(gè)參數(shù)坑雅，用于指定填充的起始位置和結(jié)束位置辈挂。
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
七、includes()方法
Array.prototype.includes 方法返回一個(gè)布爾值裹粤，表示某個(gè)數(shù)組是否包含給定的值终蒂，與字符串的includes方法類似。
雖然我們可以使用indexOf來判斷一個(gè)數(shù)組中是否含有某一元素遥诉，但是indexOf方法有兩個(gè)缺點(diǎn)拇泣，一是不夠語(yǔ)義化，它的含義是找到參數(shù)值的第一個(gè)出現(xiàn)位置矮锈，所以要去比較是否不等于-1霉翔，表達(dá)起來不夠直觀。二是苞笨，它內(nèi)部使用嚴(yán)格相等運(yùn)算符===進(jìn)行判斷债朵，這會(huì)導(dǎo)致對(duì)NaN的誤判。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
八瀑凝、flat(), flatMap()
數(shù)組的成員有時(shí)還是數(shù)組序芦，Array.prototype.flat()用于將嵌套的數(shù)組“拉平”，變成一維的數(shù)組粤咪。該方法返回一個(gè)新數(shù)組谚中，對(duì)原數(shù)據(jù)沒有影響。該方法可以接受1個(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]
[1, 2, [3, [4, 5]]].flat(Infinity) // 表示將多維數(shù)組變成一位數(shù)組
// [1, 2, 3, 4, 5]
我們可以用該方法去除數(shù)組中的空項(xiàng)：
[1,2,,4,[5,6]].flat(0) // [1,2,4,[5,6]]
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]
該方法只能拉平一層点寥。flatMap()方法還可以有第二個(gè)參數(shù)艾疟，用來綁定遍歷函數(shù)里面的this。
九敢辩、數(shù)組的空位
空位不是undefined蔽莱，一個(gè)位置的值等于undefined，依然是有值的戚长〉晾洌空位是沒有任何值，in運(yùn)算符可以說明這一點(diǎn)同廉。
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
ES5 對(duì)空位的處理仪糖，已經(jīng)很不一致了柑司，大多數(shù)情況下會(huì)忽略空位。
-
forEach(),filter(),reduce(),every()和some()都會(huì)跳過空位锅劝。 -
map()會(huì)跳過空位攒驰，但會(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玻粪。
