在 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