在日常工作中我們經(jīng)常會(huì)與數(shù)組打交道，因此需要熟練掌握數(shù)組操作的相關(guān)方法，ES6中關(guān)于數(shù)組的操作，又給我們帶來(lái)了哪些驚喜呢，Array數(shù)組操作又添加了哪些新方法？

本篇文章將從以下幾個(gè)方面進(jìn)行介紹：

• Array.from()
• Array.of()
• fill()
• includes()
• find()&findIndex()
• copyWithin()
• entries(), keys()&values()

本篇文章預(yù)計(jì)10分鐘

Array.from()

Array.from()方法實(shí)現(xiàn)了把可迭代的對(duì)象(比如：Set，Map，Array)或類數(shù)組對(duì)象(一個(gè)擁有l(wèi)ength屬性且其它屬性鍵值為數(shù)字的對(duì)象)轉(zhuǎn)換成數(shù)組的功能。Array.from()語(yǔ)法定義如下：

Array.from(arrayLike[, mapFn[, thisArg]])

三個(gè)參數(shù)對(duì)應(yīng)的含義如下：

• arrayLike：類數(shù)組或可迭代的對(duì)象
• mapFn:可選參數(shù)，回調(diào)函數(shù)實(shí)現(xiàn)元素迭代的功能(類似Map函數(shù))
• thisArg：可選參數(shù)，map函數(shù)中this屬性指向這個(gè)對(duì)象。

接下來(lái)我們來(lái)看幾個(gè)例子：

Map轉(zhuǎn)換

其函數(shù)功能就是將Map對(duì)象轉(zhuǎn)換成一個(gè)一位數(shù)組，類似[key1,value1,key2,value2,key3,value3.....],如下段代碼所示

const map1 = new Map();map1.set('k1', '前');map1.set('k2', '端');map1.set('k3', '達(dá)');map1.set('k4', '人');console.log('%s', Array.from(map1))//outputs//k1,前,k2,端,k3,達(dá),k4,人

Set轉(zhuǎn)換

其函數(shù)功能將Set對(duì)象轉(zhuǎn)換成一個(gè)一位數(shù)組，如下段代碼所示：

const set1 = new Set();set1.add(1).add(2).add(3);console.log('%s', Array.from(set1));//outputs//1,2,3

字符串轉(zhuǎn)換

其函數(shù)功能可以將一個(gè)字符串或unicode字符串轉(zhuǎn)換成一個(gè)字符數(shù)組，如下段代碼所示：

console.log('%s', Array.from('hello world'));console.log('%s', Array.from('前端達(dá)人'));//outputs//h,e,l,l,o, ,w,o,r,l,d//前,端,達(dá),人

類數(shù)組對(duì)象轉(zhuǎn)換

一個(gè)類數(shù)組對(duì)象必須有l(wèi)ength屬性，且它的屬性名必須是數(shù)值或者可以轉(zhuǎn)換成數(shù)值的字符。 注意：屬性名代表了數(shù)組的索引號(hào)，如果沒(méi)有這個(gè)索引號(hào)，轉(zhuǎn)出來(lái)的數(shù)組中對(duì)應(yīng)的元素就為空。

如下代碼所示：

console.log('%s', Array.from({ 0: '0', 1: '1', 3: '3', length:4}));//outputs//0,1,,3

如果不帶length屬性，數(shù)組對(duì)象為空，如下段代碼所示，沒(méi)有任何輸出：

console.log('%s', Array.from({ 0: 0, 1: 1}))

對(duì)象的屬性名不能轉(zhuǎn)換成索引號(hào)時(shí)，如下段代碼所示，沒(méi)有任何輸出：

console.log('%s', Array.from({ a: '1', b: '2', length:2}));

mapFn函數(shù)轉(zhuǎn)換

接下我們來(lái)看下如何使用map函數(shù)的使用，我們創(chuàng)建了一個(gè)接收可變參數(shù)的函數(shù)(arguments類數(shù)組對(duì)象)，并返回一個(gè)針對(duì)參數(shù)處理過(guò)的數(shù)組，如下段代碼所示：

function double(arr) { return Array.from(arguments, function(elem) { return elem * 2; });}const result = double(1, 2, 3, 4);console.log(result);//outputs//[ 2, 4, 6, 8 ]

第三個(gè)參數(shù)對(duì)象，mapFn函數(shù)的this指向

該參數(shù)是非常有用的，我們精彩會(huì)將被處理的數(shù)據(jù)和處理對(duì)象進(jìn)行分離，將各種不同的處理數(shù)據(jù)的方法封裝到不同的的對(duì)象中去，處理方法采用相同的名字。

在調(diào)用Array.from對(duì)數(shù)據(jù)對(duì)象進(jìn)行轉(zhuǎn)換時(shí)，可以將不同的處理對(duì)象按實(shí)際情況進(jìn)行注入，以得到不同的結(jié)果，適合解耦。這種做法是模板設(shè)計(jì)模式的應(yīng)用，有點(diǎn)類似于依賴注入。如下段代碼所示：

let diObj = { handle: function(n){ return n + 2 }}console.log('%s', Array.from( [1, 2, 3, 4, 5], function (x){ return this.handle(x) }, diObj))

處理Dom對(duì)象的應(yīng)用

在實(shí)際開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)處理Dom對(duì)象，針對(duì)對(duì)象進(jìn)行循環(huán)迭代處理，如下段所示：

const arr = document.querySelectorAll('div');/* arr.forEach( item => console.log(item.tagName) ) */ // => wrongArray.from(arr).forEach( item => console.log(item.tagName) ); // correct”

有上述代碼我們看出，arr.forEach無(wú)法運(yùn)行，是因?yàn)镈OM對(duì)象是類數(shù)組對(duì)象，并非真實(shí)數(shù)組，我們需要使用Array.from()方法進(jìn)行數(shù)組轉(zhuǎn)換。

Array.of()

在ES6之前，我們使用 Array(...)方法聲明一個(gè)數(shù)組，此方法接收一個(gè)參數(shù)，即此參數(shù)代表數(shù)組的長(zhǎng)度而不是一個(gè)包含此數(shù)字的數(shù)組，聲明后會(huì)構(gòu)建一個(gè)此長(zhǎng)度的空數(shù)組，有時(shí)候會(huì)產(chǎn)生難以發(fā)現(xiàn)的錯(cuò)誤。因此ES6推出了Array.of()用于解決此問(wèn)題，成為數(shù)組的推薦函數(shù)構(gòu)造器。如下段代碼代碼所示：

let arr1 = Array(2);let arr2 = Array.of(1,2,3);console.log(arr1.length);console.log(arr1);console.log(arr2.length)console.log(arr2);

上述代碼將會(huì)輸出：

2[ <2 empty items> ]3[ 1, 2, 3 ]

由此可見(jiàn)使用 Array.of() 更能體現(xiàn)構(gòu)建數(shù)組的意圖，更清晰直白。

fill()

fill()函數(shù)用來(lái)將數(shù)值填充到指定的數(shù)組中，我們可以定義被填充數(shù)組的開(kāi)始位置和結(jié)束位置，其使用語(yǔ)法定義如下：

Array.prototype.fill(value[, start[, end]])

• value：要填充的數(shù)值，必填
• start：填充的開(kāi)始位置，選填
• end：填充的結(jié)束位置，不包含此項(xiàng)，選填

注：如果只有value參數(shù)，即數(shù)組中所有的內(nèi)容為此項(xiàng)；如果沒(méi)有end參數(shù)，則其默認(rèn)值為數(shù)組的長(zhǎng)度；如果start或end為負(fù)數(shù)，其對(duì)應(yīng)的值為當(dāng)前數(shù)值+數(shù)組的長(zhǎng)度

為了更好理解此函數(shù)，我們先來(lái)一段代碼，如下所示：

let arr1 = [1, 2, 3, 4];let arr2 = [1, 2, 3, 4];let arr3 = [1, 2, 3, 4];let arr4 = [1, 2, 3, 4];let arr5 = [1, 2, 3, 4];arr1.fill(5);arr2.fill(5, 1, 2);arr3.fill(5, 1, 3);arr4.fill(5, -3, 2);arr5.fill(5, 0, -2);console.log(arr1);console.log(arr2);console.log(arr3);console.log(arr4);console.log(arr5);

上述代碼將會(huì)輸出：

[ 5, 5, 5, 5 ][ 1, 5, 3, 4 ][ 1, 5, 5, 4 ][ 1, 5, 3, 4 ][ 5, 5, 3, 4 ]

includes()

includes()方法用來(lái)判斷數(shù)組中是否含有某元素，如果存在返回true,不存在返回false，如下段代碼所示：

const arr = [0, 1, 1, 2, 3, 5, 8, 13];arr.includes(0); // truearr.includes(13); // truearr.includes(21); // false

與indexOf()方法的區(qū)別

indexof()方法用來(lái)判斷數(shù)組中是否含有某元素，但是返回結(jié)果是此元素在數(shù)組的索引位置，如果不存在則返回-1，如下段代碼所示：

const arr = ['apple', 'mango', 'banana'];console.log(arr.indexOf('前端達(dá)人')); // -1console.log(arr.indexOf('apple')); // 0console.log(arr.indexOf('mango')); // 1console.log(arr.indexOf('apple') >= 0); // true console.log(arr.includes('apple')); // true console.log(arr.indexOf('pineapple') >= 0); // false console.log(arr.includes('pineapple')); // false

如果你還要問(wèn)還有什么區(qū)別，還有一個(gè)不太常用的關(guān)于NaN的判斷，示例代碼如下：

const arr = ['Some elements I like', NaN, 1337, true, false, 0017];console.log(arr.includes(NaN)); // trueconsole.log(arr.indexOf(NaN) >= 0); // false

因?yàn)閕ndex.of()的使用嚴(yán)格匹配(===)進(jìn)行判斷，我們可以使用console.log(NaN===NaN)進(jìn)行確認(rèn)，運(yùn)行結(jié)果為false。

find()&findIndex()

find()

find()函數(shù)用來(lái)在數(shù)組中查找目標(biāo)元素，找到就返回該元素(找到一個(gè)即可，不再尋找其它)，找不到返回undefined。其語(yǔ)法定義如下：

arr.find(callback[, thisArg]);

• callback：回調(diào)的函數(shù)
• thisArg：執(zhí)行回調(diào)函數(shù)時(shí)的this指向，可選

在callback回調(diào)函數(shù)上一共有三個(gè)參數(shù)：

• 每一次迭代查找的數(shù)組元素
• 每一次迭代查找的數(shù)組元素索引
• 被查找的數(shù)組

為了更好的理解這個(gè)函數(shù)，我們來(lái)看如下代碼，示例如下：

const arr = [1, 2, 3, 4];const result = arr.find(function(elem) { return elem > 2; });console.log(result);//ourputs//3

上述輸出結(jié)果只返還了一項(xiàng)，其實(shí)滿足條件的有兩項(xiàng)，但是find函數(shù)的功能，只要找到一項(xiàng)內(nèi)容就返回。

findIndex()

findIndex()和find()類似，差別就是返回該元素在數(shù)組中對(duì)應(yīng)的索引，只返回最先滿足條件的元素的索引。如下段代碼所示：

const arr = [1, 3, 4, 5];const result = arr.findIndex(function(elem) {return elem > 3;});console.log(result);//outputs//2

數(shù)組中滿足大于3的元素有4，5兩項(xiàng)，由于此函數(shù)只返還最先滿足大于3的元素的索引，元素4的索引為2，因此返回2。

copyWithin()

copyWithin()方法淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個(gè)位置，覆蓋這個(gè)位置所有原來(lái)的值，并返回它，不會(huì)改變?cè)瓟?shù)組的長(zhǎng)度。其語(yǔ)法定義如下：

arr.copyWithin(target[, start[, end]])

• target：在當(dāng)前數(shù)組，定義要從什么位置開(kāi)始復(fù)制的索引。如果數(shù)值大于等于數(shù)組長(zhǎng)度，數(shù)組不會(huì)進(jìn)行拷貝，保持原樣。
• start： 在當(dāng)前數(shù)組，選取要復(fù)制的數(shù)組內(nèi)容的起始索引，如果為負(fù)值，對(duì)應(yīng)的值則為當(dāng)前值+數(shù)組的長(zhǎng)度
• end：在當(dāng)前數(shù)組，選取要復(fù)制的數(shù)組內(nèi)容的結(jié)束索引，不包含此項(xiàng)內(nèi)容。如果為負(fù)值，對(duì)應(yīng)的值則為當(dāng)前值+數(shù)組的長(zhǎng)度，此參數(shù)可選。如果沒(méi)提供，其值默認(rèn)為數(shù)組的長(zhǎng)度

注：索引從0開(kāi)始

為了更好的理解此方法，筆者用下圖進(jìn)行示意：

接下來(lái)為了理解這些參數(shù)，我們來(lái)看一段代碼，示例代碼如下：

const arr1 = [1, 2, 3, 4, 5];const arr2 = [1, 2, 3, 4, 5];const arr3 = [1, 2, 3, 4, 5];const arr4 = [1, 2, 3, 4, 5];arr1.copyWithin(1, 2, 4);arr2.copyWithin(0, 1);arr3.copyWithin(1, -2);arr4.copyWithin(1, -2, -1);console.log(arr1);console.log(arr2);console.log(arr3);console.log(arr4);

上述代碼的輸出結(jié)果：

[1,3,4,4,5][2,3,4,5,5][1,4,5,4,5][1,4,3,4,5]

entries(), keys()&values()

entries()方法返回一個(gè)Array Iterator對(duì)象，該對(duì)象包含數(shù)組中每個(gè)索引的鍵/值對(duì)，類似[key1,value1,key2,value2,key3,value3.....]

keys()方法返回一個(gè)包含數(shù)組中每個(gè)索引鍵的Array Iterator對(duì)象。

values()方法返回一個(gè)新的 Array Iterator 對(duì)象，該對(duì)象包含數(shù)組每個(gè)索引的值。 注意：使用這些方法返回的是可迭代的Array Iterator對(duì)象而不是數(shù)組。

const arr = ['a', 'b', 'c'];const entries = arr.entries();const keys = arr.keys();const values = arr.values();console.log(...entries);console.log(...keys);console.log(...values);

上述代碼輸出結(jié)果：

0,a 1,b 2,c0 1 2a b c

小節(jié)

由于內(nèi)容篇幅有限，今天的文章就介紹到這里，下篇文章筆者將繼續(xù)介紹Array數(shù)組迭代的新方法——map()，filter()，forEach()，some()，reduce()等，敬請(qǐng)期待。

更多精彩內(nèi)容，請(qǐng)微信關(guān)注“前端達(dá)人”公眾號(hào)

總結(jié)

以上是生活随笔為你收集整理的doctrine find的对象转换成数组_「ES6基础」Array数组的新方法（上）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。