在日常工作中我們經常會與數組打交道，因此需要熟練掌握數組操作的相關方法，ES6中關于數組的操作，又給我們帶來了哪些驚喜呢，Array數組操作又添加了哪些新方法？

本篇文章將從以下幾個方面進行介紹：

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

本篇文章預計10分鐘

Array.from()

Array.from()方法實現了把可迭代的對象(比如：Set，Map，Array)或類數組對象(一個擁有length屬性且其它屬性鍵值為數字的對象)轉換成數組的功能。Array.from()語法定義如下：

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

三個參數對應的含義如下：

• arrayLike：類數組或可迭代的對象
• mapFn:可選參數，回調函數實現元素迭代的功能(類似Map函數)
• thisArg：可選參數，map函數中this屬性指向這個對象。

接下來我們來看幾個例子：

Map轉換

其函數功能就是將Map對象轉換成一個一位數組，類似[key1,value1,key2,value2,key3,value3.....],如下段代碼所示

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

Set轉換

其函數功能將Set對象轉換成一個一位數組，如下段代碼所示：

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

字符串轉換

其函數功能可以將一個字符串或unicode字符串轉換成一個字符數組，如下段代碼所示：

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

類數組對象轉換

一個類數組對象必須有length屬性，且它的屬性名必須是數值或者可以轉換成數值的字符。 注意：屬性名代表了數組的索引號，如果沒有這個索引號，轉出來的數組中對應的元素就為空。

如下代碼所示：

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

如果不帶length屬性，數組對象為空，如下段代碼所示，沒有任何輸出：

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

對象的屬性名不能轉換成索引號時，如下段代碼所示，沒有任何輸出：

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

mapFn函數轉換

接下我們來看下如何使用map函數的使用，我們創建了一個接收可變參數的函數(arguments類數組對象)，并返回一個針對參數處理過的數組，如下段代碼所示：

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 ]

第三個參數對象，mapFn函數的this指向

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

在調用Array.from對數據對象進行轉換時，可以將不同的處理對象按實際情況進行注入，以得到不同的結果，適合解耦。這種做法是模板設計模式的應用，有點類似于依賴注入。如下段代碼所示：

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對象的應用

在實際開發過程中，我們經常會處理Dom對象，針對對象進行循環迭代處理，如下段所示：

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

有上述代碼我們看出，arr.forEach無法運行，是因為DOM對象是類數組對象，并非真實數組，我們需要使用Array.from()方法進行數組轉換。

Array.of()

在ES6之前，我們使用 Array(...)方法聲明一個數組，此方法接收一個參數，即此參數代表數組的長度而不是一個包含此數字的數組，聲明后會構建一個此長度的空數組，有時候會產生難以發現的錯誤。因此ES6推出了Array.of()用于解決此問題，成為數組的推薦函數構造器。如下段代碼代碼所示：

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);

上述代碼將會輸出：

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

由此可見使用 Array.of() 更能體現構建數組的意圖，更清晰直白。

fill()

fill()函數用來將數值填充到指定的數組中，我們可以定義被填充數組的開始位置和結束位置，其使用語法定義如下：

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

• value：要填充的數值，必填
• start：填充的開始位置，選填
• end：填充的結束位置，不包含此項，選填

注：如果只有value參數，即數組中所有的內容為此項；如果沒有end參數，則其默認值為數組的長度；如果start或end為負數，其對應的值為當前數值+數組的長度

為了更好理解此函數，我們先來一段代碼，如下所示：

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);

上述代碼將會輸出：

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

includes()

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

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

與indexOf()方法的區別

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

const arr = ['apple', 'mango', 'banana'];console.log(arr.indexOf('前端達人')); // -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

如果你還要問還有什么區別，還有一個不太常用的關于NaN的判斷，示例代碼如下：

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

因為index.of()的使用嚴格匹配(===)進行判斷，我們可以使用console.log(NaN===NaN)進行確認，運行結果為false。

find()&findIndex()

find()

find()函數用來在數組中查找目標元素，找到就返回該元素(找到一個即可，不再尋找其它)，找不到返回undefined。其語法定義如下：

arr.find(callback[, thisArg]);

• callback：回調的函數
• thisArg：執行回調函數時的this指向，可選

在callback回調函數上一共有三個參數：

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

為了更好的理解這個函數，我們來看如下代碼，示例如下：

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

上述輸出結果只返還了一項，其實滿足條件的有兩項，但是find函數的功能，只要找到一項內容就返回。

findIndex()

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

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

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

copyWithin()

copyWithin()方法淺復制數組的一部分到同一數組中的另一個位置，覆蓋這個位置所有原來的值，并返回它，不會改變原數組的長度。其語法定義如下：

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

• target：在當前數組，定義要從什么位置開始復制的索引。如果數值大于等于數組長度，數組不會進行拷貝，保持原樣。
• start： 在當前數組，選取要復制的數組內容的起始索引，如果為負值，對應的值則為當前值+數組的長度
• end：在當前數組，選取要復制的數組內容的結束索引，不包含此項內容。如果為負值，對應的值則為當前值+數組的長度，此參數可選。如果沒提供，其值默認為數組的長度

注：索引從0開始

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

接下來為了理解這些參數，我們來看一段代碼，示例代碼如下：

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);

上述代碼的輸出結果：

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

entries(), keys()&values()

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

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

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

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);

上述代碼輸出結果：

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

小節

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

更多精彩內容，請微信關注“前端達人”公眾號

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。