JavaScript - Array.from() 方法

在 JavaScript 中，Array.from() 方法是一個靜態方法。它從類陣列物件或可迭代物件建立一個新的、影子複製的陣列。此方法允許我們將不是陣列的物件（例如字串、集合或類陣列物件）轉換為陣列。

由於 Array.from() 方法是 JavaScript Array 物件的靜態屬性，因此我們只能將其用作 Array.from()。如果我們將此方法用作 number.from()，其中 number 是一個數組，它將返回“undefined”。

語法

以下是 JavaScript Array.from() 方法的語法：

Array.from(arrayLike, mapFn, thisArg)

引數

此方法接受三個引數。下面描述了相同的內容：

arrayLike − 要轉換為陣列的類陣列或可迭代物件。
mapFn (可選) − 要對每個元素呼叫的對映函式。
thisArg (可選) − 在執行 mapFn 時用作this的值。

返回值

此方法返回一個新的 Array 例項。

示例

示例 1

在下面的示例中，我們使用 JavaScript Array.from() 方法將“字串”轉換為字元陣列。

<html>
<body>
   <script>
      const str = 'Tutorialspoint';
      const arr = Array.from(str);
      document.write(arr);
   </script>
</body>
</html>

執行上述程式後，它會將字串“str”轉換為其字元陣列。

輸出

T,u,t,o,r,i,a,l,s,p,o,i,n,t

示例 2

在此示例中，我們從“類陣列物件”建立一個數組，該物件具有 length 屬性和類似於陣列的數字屬性：

<html>
<body>
   <script>
      const arrayLikeObj = { 0: 'apple', 1: 'banana', 2: 'cherry', length: 3 };
      const arr = Array.from(arrayLikeObj);
      document.write(arr);
   </script>
</body>
</html>

如果我們執行上述程式，它將從類陣列物件'arrayLikeObj'建立一個數組

輸出

apple,banana,cherry

示例 3

在這裡，我們使用 Array.from() 方法從“Set”建立一個數組：

<html>
<body>
   <script>
      const set = new Set(['apple', 'banana', 'cherry']);
      const arr = Array.from(set);
      document.write(arr);
   </script>
</body>
</html>

正如我們在輸出中看到的，新陣列包含集合中的所有值作為元素，順序相同。

輸出

apple,banana,cherry

示例 4

在下面的示例中，我們建立一個長度為 5 的陣列，第二個引數（對映函式）將每個索引 i 乘以 2 以生成陣列的值。

<html>
<body>
   <script>
      const arr = Array.from({ length: 5 }, (v, i) => i * 2);
      document.write(arr);
   </script>
</body>
</html>

輸出

0,2,4,6,8

列印頁面