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

打印页面