跳到主要内容

Javascript 数组 from() 方法

from() 方法可以从任何类数组或可迭代对象创建一个新数组。

示例​

// 从字符串创建一个新数组
let newArray = Array.from("abc");

console.log(newArray);

// 输出：
// [ 'a', 'b', 'c' ]

from() 语法​

from() 方法的语法为：

Array.from(arraylike, mapFunc, thisArg);

from() 方法作为一个静态方法，需要使用 Array 类名来调用。

from() 参数​

from() 方法可以接受 三个 参数：

  • arraylike - 要转换成数组的类数组或可迭代对象。
  • mapFunc（可选）- 对每个元素调用的映射函数。
  • thisArg（可选）- 执行 mapFunc 时使用的 this 值。

注意：Array.from(obj, mapFunc, thisArg) 等价于 Array.from(obj).map(mapFunc, thisArg)。

from() 返回值​

  • 返回一个新的 Array 实例。

注意：此方法可以从以下对象创建数组：

  • 类数组对象 - 拥有 length 属性并且元素有索引的对象，如 String。
  • 可迭代对象，如 Map 或 Set。

示例 1：使用 from() 方法创建类数组对象​

// 从字符串创建数组
let array1 = Array.from("JavaScript");

console.log(array1);

输出

['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

在上述示例中，我们使用了 from() 方法从 'JavaScript' 字符串创建了一个新数组。

我们使用 Array 类调用了方法 Array.from("JavaScript")。该方法返回一个新数组 ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't'] 并将其赋值给 array1。

示例 2：使用带映射函数的 from() 方法​

// 返回新数组的函数
function createArray(arraylike, mapFunc) {
  return Array.from(arraylike, mapFunc);
}

// 使用箭头函数作为 mapFunc
let result = createArray([2, 4, 6], (element) => element + 2);

console.log(result);

输出

[ 4, 6, 8 ]

在上述示例中，我们在 from() 方法中传递了一个映射函数，该函数将被创建的数组中的每个元素增加 2。

示例 3：使用 Set 的 from() 方法​

// 定义一个 Set
let set = new Set(["JavaScript", "Python", "Go", "Python"]);

// 从给定的 set 创建一个数组
let result = Array.from(set);

console.log(result);

输出

[ 'JavaScript', 'Python', 'Go' ]

这里，我们使用 from() 方法和一个可迭代对象 Set 创建了一个新数组。

推荐阅读： JavaScript 数组 map()

最后于 更新