Array.from()

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

下面是一個類似數(shù)組的對象，Array.from將它轉(zhuǎn)為真正的數(shù)組。

補(bǔ)充

什么是類似數(shù)組？

上圖是通過：console.log打印出來的數(shù)組。因此只要我們構(gòu)造的數(shù)據(jù)里面包含{0:val1,1:val2,2:val3,length:3}這種格式就行了。最length的值必須和前面的key的數(shù)量保持一致。否則，調(diào)用上面的方法。也是可以轉(zhuǎn)換成數(shù)組，只不過，會將對應(yīng)不上的位置設(shè)置成undefined。如下圖：

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

console.log(Array.from([1,?2,?3])); // (3) [1, 2, 3]

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

擴(kuò)展運(yùn)算符背后調(diào)用的是遍歷器接口（Symbol.iterator），如果一個對象沒有部署這個接口，就無法轉(zhuǎn)換。Array.from方法則是還支持類似數(shù)組的對象。所謂類似數(shù)組的對象，本質(zhì)特征只有一點(diǎn)，即必須有length屬性。

因此，任何有length屬性的對象，都可以通過Array.from方法轉(zhuǎn)為數(shù)組，而此時擴(kuò)展運(yùn)算符就無法轉(zhuǎn)換。

說明

如果length是小于0的數(shù)字或者是無法轉(zhuǎn)換成數(shù)據(jù)。該方法將會返回類似如下的信息：

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

Array.from還可以接受第二個參數(shù)，該參數(shù)是一個函數(shù)，用來對每個元素進(jìn)行處理，將處理后的數(shù)據(jù)放入返回的數(shù)組。

下面的一個例子：用來計算前面幾個數(shù)的和，并返回到新的數(shù)組里面

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

Array.from()的另一個應(yīng)用是，將字符串轉(zhuǎn)為數(shù)組，然后返回字符串的長度。這種應(yīng)用在前端開發(fā)中用的比較多。

針對上面的例子，學(xué)是繁體的，我們這里想把學(xué)都換成簡體的，參看如下代碼：

Array.of()

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

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

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ù)組。如果沒有參數(shù)，就返回一個空數(shù)組。

數(shù)組實(shí)例的copyWithin()

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

上圖是通過vscode查看的該函數(shù)的參數(shù)說明。

它接受三個參數(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ù)值。

上面代碼表示將從3號位置（院）到數(shù)組結(jié)束的成員，復(fù)制到從0號位開始的位置，結(jié)果覆蓋了原來的學(xué)字。

更多例子

數(shù)組實(shí)例的find()和findIndex()

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

如果沒有找到符合條件的將會返回：undefined。

該方法可以接受3個參數(shù)：

上圖是ES2015的方法說明。

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

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

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

需要注意的是：NaN的比較方式。

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

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

fill方法使用給定值，填充一個數(shù)組（會改變原數(shù)組的數(shù)據(jù)）。

上面代碼表明，fill方法用于將數(shù)組的值全部替換成已有的值。

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

來看下面一個例子：

將該數(shù)組最后面的句號換成感嘆號。

數(shù)組實(shí)例的entries()，keys()和values()

ES6中為數(shù)組提供三個新方法：entries()，keys()和values()。他們都是用來遍歷數(shù)組。它們都返回一個遍歷器對象。唯一的區(qū)別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

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

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

該方法的第二個參數(shù)表示搜索的起始位置，默認(rèn)為0。如果第二個參數(shù)為負(fù)數(shù)，則表示倒數(shù)的位置，如果這時它大于數(shù)組長度（比如第二個參數(shù)為-4，但數(shù)組長度為3），則會重置為從0開始。

數(shù)組的空位

數(shù)組的空位指，數(shù)組的某一個位置沒有任何值。比如，Array構(gòu)造函數(shù)返回的數(shù)組都是空位。

ES6語法會將空位轉(zhuǎn)為undefined。所以上圖第二行輸出是：(3) [空 × 3]。但是具體調(diào)用的時候就是undefined了。