如何在 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+ 次查看

启动您的 职业生涯

通过完成课程获得认证

开始
广告