JavaScript ES6中關於Array.from的用法

ES6為Array增加了from函數用來將其他物件轉換成陣列。

當然，其他物件也是有要求，也不是所有的，可以將兩個物件轉換成陣列。

1.部署了Iterator介面的對象，例如：Set，Map，Array。

2.類別數組對象，什麼叫類別數組對象，就是一個對象必須有length屬性，沒有length，轉出來的就是空數組。

 

轉換map

#將Map物件的鍵值對轉換成一個一維陣列。

實際上轉換出來的陣列元素的序列是key1,value1,key2,value2,key3,value3.....

const map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log('%s', Array.from(map1))

結果：

k1,1,k2,2,k3,3

#轉換set

將Set物件的元素轉換成一個陣列。

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

結果

1,2,3

轉換字串

#可以吧ascii的字串拆解成一個數據，也可以準確的將unicode字串拆解成數組。

console.log('%s', Array.from('hello world'))
console.log('%s', Array.from('\u767d\u8272\u7684\u6d77'))

結果：

h,e,l,l,o, ,w,o,r,l,d
白,色,的,海

類別陣列物件

一個類別陣列物件必須要有length，他們的元素屬性名必須是數值或可轉換成數值的字元。

注意：屬性名代表了數組的索引號，如果沒有這個索引號，轉出來的數組中對應的元素就為空。

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

結果：

0,1,,3

如果物件不帶length屬性，那麼轉出來就是空數組。

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

結果就是空數組。

物件的屬性名稱不能轉換成索引號時。

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

結果也是空數組

Array.from可以接受三個參數

我們看定義：

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

arrayLike：被轉換的的物件。

mapFn：map函數。

thisArg：map函數中this指向的物件。

第二個參數，map函數

用來對轉換中，每一個元素進行加工，並將加工後的結果作為結果數組的元素值。

console.log('%s', Array.from([1, 2, 3, 4, 5], (n) => n + 1))

結果：

上面的map函數其實是為陣列中的每個數值加了1。

2,3,4,5,6

第三個參數，map函數中this指向的物件

該參數是非常有用的，我們可以將被處理的資料和處理對象分離，將各種不同的處理資料的方法封裝到不同的物件中去，處理方法採用相同的名字。

在呼叫Array.from對資料物件進行轉換時，可以將不同的處理物件按實際情況進行注入，以得到不同的結果，適合解耦。

這種做法是模板設計模式的應用，有點類似依賴注入。

let diObj = n + 2'%s'1, 2, 3, 4, 5

結果：

3,4,5,6,7

以上是JavaScript ES6中關於Array.from的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！