如何在 JavaScript 中將數字轉換為陣列？

在 JavaScript 中，有很多內建方法可以將數字轉換為陣列。最簡單的方法是使用 split() 方法。我們還可以使用 map()、reduce() 或 form() 方法來執行此任務。本文討論了一些將數字轉換為陣列最常用的方法，以及何時以及如何應用每種技術的示例。

現在，問題將是，為什麼需要將數字轉換為陣列？那麼原因可能是將電話號碼拆分為各個數字或將日期分解為其組成部分（解析日期），或者在對各個數字執行數學運算時它可能很有用。

方法 1：使用 split() 方法

現在，我們將瞭解 split() 方法。它是將字串分解成更小的子字串並將其轉換為數字的有用工具。然後，它甚至可以透過將數字轉換為字串並將它們拆分為單個數字來將數字轉換為陣列。讓我們透過實現如示例所示的 split() 函式來了解一下。

示例

在這個示例中，我們使用了 toString() 函式將整數轉換為字串。然後使用 split() 函式將字串分隔成單個字元的陣列。最終輸出將是一個字串陣列，每個字串表示原始數字的一個數字。

<html>
<body>
   <p id="print"></p>
   <script>
      let number = 12345;
      let numberArray = number.toString().split("");
      document.getElementById("print").innerHTML = numberArray;
   </script>
</body>
</html>

方法 2：使用 map() 方法

透過使用 map() 方法，可以建立一個新陣列，其中包含對呼叫陣列中每個元素執行給定函式的結果。透過利用 map() 方法建立數字陣列，它還可以用於將數字轉換為陣列。以下是如何使用 map() 方法將整數轉換為陣列的示例：

示例

在此示例中，我們首先使用 toString() { [native code] }() 方法將整數轉換為字串。然後使用 Array.from() 函式將字串轉換為陣列。最後，我們使用 map() 方法將字串陣列轉換為整數陣列。

<html>
<body>
   <p id="print"></p>
   <script>
      let number = 12345;
      let numberArray = Array.from(number.toString(), Number).map(Number);
      document.getElementById("print").innerHTML =numberArray;
   </script>
</body>
</html>

方法 3：使用 for 迴圈

此方法是最簡單的方法，它使用 for 迴圈迭代數字並將其轉換為數字陣列。

示例

在這個例子中，我們首先使用 toString() 方法將數字轉換為字串。然後我們使用 for 迴圈迭代數字，並使用 parseInt 方法轉換各個數字並將其推入陣列。

<html>
<body>
   <p id="print"></p>
   <script>
      let number = 12345;
      let numberArray = [];
      for (let i = 0; i < number.toString().length; i++) {
         numberArray.push(parseInt(number.toString()[i]));
      }
      document.getElementById("print").innerHTML = numberArray;
   </script>
</body>
</html>

方法 4：使用 reduce() 方法

reduce() 方法是一種陣列方法，可用於將陣列縮減為單個值。在此示例中，我們將使用 reduce() 方法將數字轉換為數字陣列。

示例

在這個例子中，我們首先使用 `toString()` 方法將數字轉換為字串。然後我們使用 `split()` 方法將字串拆分為單個字元的陣列。最後，我們使用 `reduce()` 方法迭代字元陣列，將每個字元解析為整數並將其新增到最終陣列中，在本例中，最終陣列是累加器。

<html>
<body>
   <p id="print"></p>
   <script>
      let number = 12345;
      let numberArray = number.toString().split('').reduce((acc, curr) => {
         return [...acc, parseInt(curr)];
      }, []);
      document.getElementById("print").innerHTML=numberArray ;
   </script>
</body>
</html>

方法 5：使用 Array.from() 方法

現在，我們將學習另一種將數字轉換為陣列的方法。因此，這裡我們將使用 Array.from 方法。Array.from 的作用是從可迭代物件或類似陣列的物件生成一個新陣列。在這種情況下，我們可以使用 Array.from() 方法將數字的字串表示形式轉換為單個數字的陣列。

示例

現在，讓我們看看上面方法的程式碼。

<html>
<body>
   <p>Original number: 12345</p>
   <p id="result"></p> 
   <script>
      const num = 12345;
      const arr = Array.from(num.toString(), Number);
      document.getElementById("result").innerHTML = arr.join(", ");
   </script>
</body>
</html>

結論

在 JavaScript 中，有多種方法可以將數字轉換為陣列，每種方法都有其優缺點。Split() 方法最簡單，而 map()、'for' 和 reduce() 方法功能更強大且適應性更強，但需要更多專業知識。您可以根據專案的具體需求選擇最適合您需求的方法。

更新於: 2023年3月2日

6K+ 次檢視

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告