ES6中的Array.from()函數的用法

ES6爲Array增長了from函數用來將其餘對象轉換成數組。

固然，其餘對象也是有要求，也不是全部的，能夠將兩種對象轉換成數組。

1.部署了Iterator（迭代器）接口的對象，好比：Set，Map，Array。

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

 

具體用法

Array.from能夠接受三個參數

咱們看定義：Array.from(arrayLike [, mapFn [, thisArg]])

arrayLike：被轉換的的對象。

mapFn：map函數。

thisArg：map函數中this指向的對象。

第一個參數

在這裏很好理解，就是要被轉換的對象

第二個參數，map函數

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

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

// 結果[2,3,4,5,6] map函數的實際的作用是給每一個元素都加了1

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

該參數是很是有用的，咱們能夠將被處理的數據和處理對象分離，將各類不一樣的處理數據的方法封裝到不一樣的的對象中去，處理方法採用相同的名字。

在調用Array.from對數據對象進行轉換時，能夠將不一樣的處理對象按實際狀況進行注入，以獲得不一樣的結果，適合解耦。

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

const obj = {
    
    add: function (n) {
        return n + 1;
    }
}

console.log( Array.from(
  [1, 2, 3, 4, 5], 
  function (x){
    return this.add(x)
  }, 
  obj))
  
  //結果 [2,3,4,5,6]

轉換set對象

 

const setArr = new Set();
setArr.add(1).add(2).add("www");
console.log(Array.from(setArr));
// 結果 [1, 2, "www"]

const setArr1 = new Set([1,1,12,2,3,4,5,5,6,6]);
console.log(Array.from(setArr1));
// 或者使用展開表達式 console.log([...setArr1]);
// 結果 [1, 12, 2, 3, 4, 5, 6] 
// 同時不難發現set具備去重的功能

轉換map對象

const mapArr = new Map();
mapArr.set('m1', 1);
mapArr.set('m2', 2);
mapArr.set('m3', 3);
console.log(Array.from(mapArr));
// 結果 [['m1', 1],['m2', 2],['m3', 3]]
console.log(Array.from(mapArr)[1]);
// 結果 ["m2", 2]

轉換類數組對象

一個類數組對象必需要有length屬性，他們的元素屬性名必須是數值或者能夠轉換成數值的字符。

注意：

1. 屬性名錶明瞭數組的索引號，若是沒有這個索引號，轉出來的數組中對應的元素就爲length長度個undefined。
2. 若是沒有length屬性，轉換出來的數組也是空的；

帶length

//注意看區別
    console.log(Array.from({
          0: 'dd',
         1: 'gg',
          2: 'w3',
          length:3
    }))
    // 結果 ["dd", "gg", "w3"]
    
    console.log(Array.from({
          0: 'dd',
         1: 'gg',
          4: 'w3',
          length:3
    }))
    // 結果 ["dd", "gg", undefined]
    
    console.log(Array.from({
          "0": 'dd',
         1: 'gg',
          "3": 'w3',
          length:6
    }))
    // 結果 ["dd", "gg", undefined, "w3", undefined, undefined]
    
//總結，生成數組的長度由length屬性肯定，若是相應索引位置上沒有值，則爲undefined

不帶length

console.log( Array.from({
      0: 3,
      1: 12
}))
// 結果 []

對象的屬性名不能轉換成索引號時

 console.log(Array.from({
      "s": 'dd',
     "ss": 'gg',
      "n": 'w3',
      length:3
}))
 // 結果 [undefined, undefined, undefined]

 

補充