Array.from()高效使用

語法規則

const someNumbers = { '0': 10, '1': 15, length: 2 };

Array.from(someNumbers, value => value * 2); // => [20, 30]

將類數組轉換成數組

你會碰到的類數組對象有：函數中的 arguments 關鍵字，或者是一個 DOM 集合。
在下面的示例中，讓我們對函數的參數求和

function sumArguments() {
    return Array.from(arguments).reduce((sum, num) => sum + num);
}

sumArguments(1, 2, 3); // => 6

Array.from() 的第一個參數可以是任意一個可迭代對象，我們繼續看一些例子:

Array.from('Hey');                   // => ['H', 'e', 'y']
Array.from(new Set(['one', 'two'])); // => ['one', 'two']

const map = new Map();
map.set('one', 1)
map.set('two', 2);
Array.from(map); // => [['one', 1], ['two', 2]]

淺拷貝數組

        var arr=[
            0,
            [1,1,1],
            [2,2,2],
            [3,3,4],
        ]
    /*  var arr2 = arr
        arr2[0]=-1;
        arr2[1][0]=11;
        console.log(arr2)對arr2的修改全部會影響arr
        console.log(arr)*/
        var arr2 = Array.from(arr)
        arr2[0]=-1;
        arr2[1][0]=11;
        //對arr2的首層修改會不會影響arr，嵌套還是會影響，這時我們就需要深拷貝
        console.log(arr2)
        console.log(arr)

構造深拷貝數組函數

可以看到這是深拷貝數組的最簡單寫法，可以輕鬆深拷貝一個數組
但存在缺陷，如果數組嵌套對象就無法深拷貝對象

        function deepCloneArray(arr){
            if(Array.isArray(arr)){
                return Array.from(arr,deepCloneArray)//遞歸入口
            }else{
                return arr
            }
        }
        var arr2 = deepCloneArray(arr)
        arr2[0]=-1;
        arr2[1][0]=11;
        arr2[2][0].name=22;
        console.log(arr2)
        console.log(arr)

填充數組

這裏用{length}創了一個含有length屬性的類數組對象，可以用來迭代

const length = 3;
const init   = 0;
const result = Array.from({ length }, () => init);

result; // => [0, 0, 0]

fill函數也能快速填充，但在使用對象填充數組的時候有侷限性

//先生成3個空項的數組再填充
const result = Array(3).fill(0);

result ; // => [0, 0, 0]

使用對象填充數組

const length = 3;
const resultA = Array.from({ length }, () => ({}));
const resultB = Array(length).fill({});

resultA; // => [{}, {}, {}]
resultB; // => [{}, {}, {}]

resultA[0] === resultA[1]; // => false
resultB[0] === resultB[1]; // => true

由 Array.from 返回的 resultA 使用不同空對象實例進行初始化。之所以發生這種情況是因爲每次調用時，mapFunction，即此處的 () => ({}) 都會返回一個新的對象。
而fill填充的{}是同一個空對象，最後填充出來的對象的修改會反應到同一個堆內存中

數組快速去重

new Set(array) 創建了一個包含數組的集合，Set 集合會刪除重複項。
因爲 Set 集合是可迭代的，所以可以使用 Array.from() 將其轉換爲一個新的數組。

function unique(array) {
  return Array.from(new Set(array));
}

unique([1, 1, 2, 3, 3]); // => [1, 2, 3]