Array.from()
Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對象（array-like object）和可遍歷（iterable）的對象（包括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']
- Array.from方法則支持類似數(shù)組的對象。所謂類似數(shù)組的對象鲜侥，本質(zhì)特征只有一點估蹄，即必須有l(wèi)ength屬性
- 只要是部署了Iterator接口的數(shù)據(jù)結(jié)構(gòu)，Array.from都能將其轉(zhuǎn)為數(shù)組。注意擴(kuò)展運算符（...）也可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組，但是依賴遍歷器接口（Symbol.iterator）
Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
上面代碼中對象有l(wèi)ength屬性觅廓，就可以被Array.from轉(zhuǎn)為數(shù)組
要注意的是：對象只會按照length的長度來查找對應(yīng)屬性二拐，如果查不到就會為undefind
let obj= {a:"1",b:"2",c:"3",length:3}
Array.from(obj) //[undefined, undefined, undefined]
obj={1:"1",2:"2",3:"3",length:3}
Array.from(obj) // [undefined, "1", "2"]
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
上面代碼中服鹅，字符串和Set結(jié)構(gòu)都具有Iterator接口，因此可以被Array.from轉(zhuǎn)為真正的數(shù)組百新。
Array.from還可以接受第二個參數(shù)企软，作用類似于數(shù)組的map方法，用來對每個元素進(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]
如果map函數(shù)里面用到了this關(guān)鍵字，還可以傳入Array.from的第三個參數(shù)杰妓，用來綁定this
技巧：
Array.from()可以將各種值轉(zhuǎn)為真正的數(shù)組藻治，并且還提供map功能。這實際上意味著巷挥，只要有一個原始的數(shù)據(jù)結(jié)構(gòu)桩卵，你就可以先對它的值進(jìn)行處理，然后轉(zhuǎn)成規(guī)范的數(shù)組結(jié)構(gòu)倍宾，進(jìn)而就可以使用數(shù)量眾多的數(shù)組方法雏节。
Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']
上面代碼中，Array.from的第一個參數(shù)指定了第二個參數(shù)運行的次數(shù)高职。這種特性可以讓該方法的用法變得非常靈活钩乍。
Array.from()的另一個應(yīng)用是，將字符串轉(zhuǎn)為數(shù)組怔锌，然后返回字符串的長度寥粹。因為它能正確處理各種Unicode字符，可以避免JavaScript將大于\uFFFF的Unicode字符埃元，算作兩個字符的bug涝涤。
function countSymbols(string) {
return Array.from(string).length;
}
Array.of()與Array()的區(qū)別
Array.of方法用于將一組值，轉(zhuǎn)換為數(shù)組岛杀。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
Array.of方法的主要目的阔拳，是彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足。因為參數(shù)個數(shù)的不同类嗤，會導(dǎo)致Array()的行為有差異糊肠。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of方法可以用下面的代碼模擬實現(xiàn)。
function ArrayOf(){
return [].slice.call(arguments);
}
copyWithin()
數(shù)組實例的copyWithin方法货裹，在當(dāng)前數(shù)組內(nèi)部，將指定位置的成員復(fù)制到其他位置（會覆蓋原有成員）黄伊，然后返回當(dāng)前數(shù)組泪酱。也就是說，使用這個方法还最，會修改當(dāng)前數(shù)組墓阀。
Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三個參數(shù)。
target（必需）：從該位置開始替換數(shù)據(jù)拓轻。
start（可選）：從該位置開始讀取數(shù)據(jù)斯撮，默認(rèn)為0。如果為負(fù)值扶叉，表示倒數(shù)勿锅。
end（可選）：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長度枣氧。如果為負(fù)值溢十，表示倒數(shù)。
這三個參數(shù)都應(yīng)該是數(shù)值达吞，如果不是张弛，會自動轉(zhuǎn)為數(shù)值。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
上面代碼表示將從3號位直到數(shù)組結(jié)束的成員（4和5）酪劫，復(fù)制到從0號位開始的位置吞鸭，結(jié)果覆蓋了原來的1和2。
以下是更多例子
// 將3號位復(fù)制到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相當(dāng)于3號位覆糟，-1相當(dāng)于4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 將3號位復(fù)制到0號位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 將2號位到數(shù)組結(jié)束刻剥，復(fù)制到0號位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 對于沒有部署TypedArray的copyWithin方法的平臺
// 需要采用下面的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
關(guān)于call函數(shù)的說明
方法使用一個指定的 this 值和單獨給出的一個或多個參數(shù)來調(diào)用一個函數(shù)
比如上面[].copyWithin.call({length: 5, 3: 1}, 0, 3)中 {length: 5, 3: 1}為指定this的值，0滩字，3是copyWithin要用到的值
數(shù)組實例的find()和findIndex()
數(shù)組實例的find方法造虏，用于找出第一個符合條件的數(shù)組成員。它的參數(shù)是一個回調(diào)函數(shù)麦箍，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)酗电，直到找出第一個返回值為true的成員，然后返回該成員内列。如果沒有符合條件的成員撵术，則返回undefined。
[1, 4, -5, 10].find((n) => n < 0) //這里箭頭函數(shù)不加花括號 會直接返回n<0的返回值话瞧，加{}就要手動返回了
// -5
上面代碼找出數(shù)組中第一個小于0的成員嫩与。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
上面代碼中，find方法的回調(diào)函數(shù)可以接受三個參數(shù)交排，依次為當(dāng)前的值划滋、當(dāng)前的位置和原數(shù)組。
數(shù)組實例的findIndex方法的用法與find方法非常類似埃篓，返回第一個符合條件的數(shù)組成員的位置处坪，如果所有成員都不符合條件，則返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
這兩個方法都可以接受第二個參數(shù)同窘，用來綁定回調(diào)函數(shù)的this對象玄帕。
另外，這兩個方法都可以發(fā)現(xiàn)NaN想邦，彌補(bǔ)了數(shù)組的IndexOf方法的不足裤纹。
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0
上面代碼中，indexOf方法無法識別數(shù)組的NaN成員丧没，但是findIndex方法可以借助Object.is方法做到鹰椒。
數(shù)組實例的fill()
fill方法食用給定值，填充一個數(shù)組呕童。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
上面代碼表明漆际，fill方法用于空數(shù)組的初始化非常方便。數(shù)組中已有的元素夺饲，會被全部抹去奸汇。
fill方法還可以接受第二個和第三個參數(shù)，用于指定填充的起始位置和結(jié)束位置
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
上面代碼表示钞支，fill方法從1號位開始茫蛹，向原數(shù)組填充7，到2號位之前結(jié)束烁挟。
數(shù)組實例的entries()婴洼，keys()和values()
ES6提供三個新的方法——entries()，keys()和values()——用于遍歷數(shù)組撼嗓。它們都返回一個遍歷器對象（詳見《Iterator》一章）柬采，可以用for...of循環(huán)進(jìn)行遍歷，唯一的區(qū)別是keys()是對鍵名的遍歷且警、values()是對鍵值的遍歷粉捻，entries()是對鍵值對的遍歷。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
如果不使用for...of循環(huán)斑芜，可以手動調(diào)用遍歷器對象的next方法肩刃，進(jìn)行遍歷。
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']
數(shù)組實例的includes()
Array.prototype.includes方法返回一個布爾值杏头，表示某個數(shù)組是否包含給定的值盈包，與字符串的includes方法類似。該方法屬于ES7醇王，但Babel轉(zhuǎn)碼器已經(jīng)支持呢燥。
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
該方法的第二個參數(shù)表示搜索的起始位置，默認(rèn)為0寓娩。如果第二個參數(shù)為負(fù)數(shù)叛氨，則表示倒數(shù)的位置呼渣，如果這時它大于數(shù)組長度（比如第二個參數(shù)為-4，但數(shù)組長度為3）寞埠，則會重置為從0開始屁置。
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
沒有該方法之前，我們通常使用數(shù)組的indexOf方法畸裳，檢查是否包含某個值缰犁。
if (arr.indexOf(el) !== -1) {
// ...
}
indexOf方法有兩個缺點淳地，一是不夠語義化怖糊，它的含義是找到參數(shù)值的第一個出現(xiàn)位置，所以要去比較是否不等于-1颇象，表達(dá)起來不夠直觀伍伤。二是，它內(nèi)部使用嚴(yán)格相當(dāng)運算符（===）進(jìn)行判斷遣钳，這會導(dǎo)致對NaN的誤判扰魂。
[NaN].indexOf(NaN)
// -1
includes使用的是不一樣的判斷算法，就沒有這個問題蕴茴。
[NaN].includes(NaN)
// true
下面代碼用來檢查當(dāng)前環(huá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)有一個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)
數(shù)組的空位
數(shù)組的空位指甘邀，數(shù)組的某一個位置沒有任何值琅攘。比如，Array構(gòu)造函數(shù)返回的數(shù)組都是空位鹃答。
Array(3) // [, , ,]
上面代碼中乎澄，Array(3)返回一個具有3個空位的數(shù)組。
注意测摔，空位不是undefined置济，一個位置的值等于undefined解恰，依然是有值的≌阌冢空位是沒有任何值护盈，in運算符可以說明這一點。
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
上面代碼說明羞酗，第一個數(shù)組的0號位置是有值的腐宋，第二個數(shù)組的0號位置沒有值。
ES5對空位的處理檀轨，已經(jīng)很不一致了胸竞，大多數(shù)情況下會忽略空位。
- forEach(), filter(), every() 和some()都會跳過空位参萄。
- map()會跳過空位卫枝，但會保留這個值
- join()和toString()會將空位視為undefined，而undefined和null會被處理成空字符串讹挎。
// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1
// filter方法
['a',,'b'].filter(x => true) // ['a','b']
// every方法
[,'a'].every(x => x==='a') // true
// 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方法會將數(shù)組的空位，轉(zhuǎn)為undefined筒溃，也就是說马篮，這個方法不會忽略空位。
Array.from(['a',,'b'])
// [ "a", undefined, "b" ]
擴(kuò)展運算符（...）也會將空位轉(zhuǎn)為undefined怜奖。
[...['a',,'b']]
// [ "a", undefined, "b" ]
copyWithin()會連空位一起拷貝浑测。
``
[,'a','b',,].copyWithin(2,0) // [,"a",,"a"]
fill()會將空位視為正常的數(shù)組位置。
new Array(3).fill('a') // ["a","a","a"]
for...of循環(huán)也會遍歷空位烦周。
let arr = [, ,];
for (let i of arr) {
console.log(1);
}
// 1
// 1
上面代碼中尽爆，數(shù)組arr有兩個空位，for...of并沒有忽略它們读慎。如果改成map方法遍歷漱贱，空位是會跳過的。
entries()夭委、keys()幅狮、values()、find()和findIndex()會將空位處理成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)空位。
