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

Array.from(
  [1, 2, 3, 4, 5], 
  function (x){
    return this.add(x)
  }, 
  obj)

轉換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]

測試題：
某公司 1 到 12 月份的銷售額存在一個物件裡面 如下：{1:222, 2:123, 5:888}，請把資料處理為如下結構：[222, 123, null, null, 888, null, null, null, null, null, null, null]
解答：

function convert(obj){
  obj.length = 13;
  return Array.from(obj,x=>x||null).slice(1);
}

convert({1:222, 2:123, 5:888});