js--數組的 Array.of() 和 Array.from() 方法的使用總結

前言

　　JavaScript 中數組的本質是一個對象，它存在的 length 屬性值隨數組元素的長度變化，但是開發中經常會遇到擁有 length 屬性和若干索引屬性的對象，被稱為類數組對象，類數組對象和數組類似，但是不能調用數組的方法。Array.from()方法解決了這一問題，將類數組轉化為數組，本文就來總結一下 Array.of()  和Array.from()  的相關知識。

正文

　　1、Array.of()

　　首先來對比一下普通創建數組的方法：

    var ar1 = new Array(2)
    console.log(ar1.length, ar1) //2 [empty,empty] (empty表示空位)
    var ar2 = new Array(1, 2, 3, 4)
    console.log(ar2.length, ar2) //4   [1,2,3,4]
    var ar3 = new Array("2")
    console.log(ar3.length, ar3) //1  ["2"]

　　上面的代碼中當使用單個數值參數來調用構造函數創建數據的時候，該數值會默認成為數組的長度；如果使用多項數據作為參數，這些參數會成為數組的項；而使用單個非數值類型的參數來調用，該參數會成為數組的唯一項。通過調用構造函數來創建數組，無法確定傳入的參數是數組的長度還是具體的每一項，因此，ES6 針對這一點做了優化，提供了 Array.of () 方法。

　　Array.of() 方法創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型。使用方法與構造函數類似，如下：

    var ar1 = Array.of(3)
    console.log(ar1); //[3]
    var ar2 = Array.of("3")
    console.log(ar2); //["3"]
    var ar3 = Array.of(undefined)
    console.log(ar3); //undefined

　　區別：Array.of() 和 Array 構造函數之間的區別在於處理整數參數：Array.of(3) 創建一個具有單個元素 3 的數組，而 Array(3) 創建一個長度為 3 的空數組（注意：這是指一個有 3 個空位 ( empty ) 的數組，而不是由 3 個 undefined 組成的數組）。

 

　　2、Array.from()

　　Array.from()  方法從一個類似數組或可迭代對象（內部有Symbol.iterator迭代器）創建一個新的，淺拷貝的數組實例並返回。

　　語法：Array.from ( arrayLike [,  mapFn [,  thisArg ] ] )，Array.from()  方法接收三個參數，其中第一個arrayLike 表示想要轉化成數組的偽數組對象或者可迭代對象，第二個參數 mapFn 為可選參數，指定新數組中每個元素都執行的回調函數，相當於執行了一邊map遍歷，第三個參數 thisArg 為可選參數，表示執行第二個回調函數時的 this 對象。

　　（1）Array.from 轉化 arguments類數組對象為數組

　　首先對比一下沒有Array.from() 方法之前的轉化方法：

    function makeArray(arrayLike) {
      var resultArr = []
      for (let i = 0; i < arrayLike.length; i++) {
        resultArr.push(arrayLike[i])
      }
      return resultArr
      //或者return Array.prototype.slice.call(arrayLike);
    }
    function doSomething() {
      console.log(arguments);
      var args = makeArray(arguments)
      console.log(args);
    }
    doSomething("a", "b")
    // Arguments(2)["a","b",length:2...]
    // ["a","b"]

　　基於上面的問題，ES6 優化后的便利方法如下：同樣，除了arguments對象類似數組外，常用的還有 DOM 節點類數組 nodeList 等。

    function doSomething() {
      var args = Array.from(arguments)
      console.log(args);
    }
    doSomething("a", "b")//["a","b"]

　　

　　（2）Array.from()  不僅可以用於類數組對象，也可以用於迭代對象，這意味着該方法可以將任意Symbol.iterator 屬性的對象轉化為數組。

    var numbers = {
      *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
      }
    };
    var numbers2 = Array.from(numbers, (value) => value + 1);
    console.log(numbers2); // [2,3,4]

　　

　　（3）除此之外，Array.from() 還有其他使用方法，如下：

     // 將字符串轉化為數組
    var str = 'foo'
    console.log(Array.from(str)); //['f','o','o']
    // 將Set集合轉化為數組
    var set = new Set([1, 1, 2, 3, 4])
    console.log(Array.from(set));//  [1, 2, 3, 4]  數組去重
    // 將map 集合轉化為數組
    var map = new Map([['1', 'a'], ['2', 'b']])
    console.log(Array.from(map)); // [['1', 'a'], ['2', 'b']]
    console.log(Array.from(map.keys()));// ['1','2']
    console.log(Array.from(map.values())); // ['a','b']
    // 傳入第二個參數
    var arr = [1, 2, 3]
    console.log(Array.from(arr, x => x * 2));//[2, 4, 6]
    // 數組淺復制（拷貝）
    var arr1 =[{name:"name"},{age:"age"}]
    var arr2 = Array.from(arr1)
    console.log(arr2);//[{name:"name"},{age:"age"}]
    arr1[0].name = "new Nmae"
    console.log(arr1);// [{name:"new Nmae"},{age:"age"}]
    console.log(arr2);// [{name:"new Nmae"},{age:"age"}]

 

寫在最后

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。