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

丶Serendipity丶發表於2021-11-10
JS陣列

前言

　　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"}]

 

寫在最後

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

 

相關文章