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 时要使用的值。

返回值

此方法返回一个新的 Array 实例。

示例 1

在下面的示例中，我们使用 JavaScript Array.from（）方法将 “string” 转换为字符数组。


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

执行上述程序后，它将字符串 “str” 转换为其字符数组。

输出

q,i,k,e,p,u,c,o,m

示例 2

在此示例中，我们将从 “类数组对象” 创建一个数组，该对象具有 length 属性和像数组一样的 numeric 属性 −


<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

本页