Array.from()

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本中运行。它自 2016 年 9 月.

报告反馈

试一试

语法

Array.from() 静态方法从 可迭代的 或 类数组 对象创建一个新的、浅层复制的 Array 实例。
Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

js

参数

arrayLike

要转换为数组的可迭代的或类数组对象。

mapFn 可选

要在数组的每个元素上调用的函数。如果提供，要添加到数组的每个值都会先通过此函数，然后将 mapFn 的返回值添加到数组中。该函数将使用以下参数调用

元素

数组中正在处理的当前元素。

索引

数组中正在处理的当前元素的索引。

thisArg 可选

在执行 mapFn 时用作 this 的值。

返回值

描述

一个新的 Array 实例。

  • Array.from() 允许您从
  • 可迭代对象（例如 Map 和 Set）创建 Array；或者，如果对象不可迭代，则

类数组对象（具有 length 属性和索引元素的对象）。

要将一个普通的、不可迭代的或类数组的对象转换为数组（通过枚举其属性键、值或两者），请使用 Object.keys()、Object.values() 或 Object.entries()。要将 异步可迭代的 转换为数组，请使用 Array.fromAsync()。

Array.from() 永远不会创建稀疏数组。如果 arrayLike 对象缺少一些索引属性，它们将在新数组中变为 undefined。

Array.from() 具有一个可选参数 mapFn，它允许您对正在创建的数组的每个元素执行函数，类似于 map()。更清楚地说，Array.from(obj, mapFn, thisArg) 与 Array.from(obj).map(mapFn, thisArg) 的结果相同，除了它不会创建中间数组，并且 mapFn 只接收两个参数（element、index）而没有整个数组，因为数组仍在构造中。

注意： 这种行为对于 类型化数组 来说更为重要，因为中间数组的值必须被截断以适合相应的类型。Array.from() 的实现方式与 TypedArray.from() 的签名相同。

示例

Array.from() 方法是一个通用的工厂方法。例如，如果 Array 的子类继承了 from() 方法，则继承的 from() 方法将返回子类的新实例，而不是 Array 实例。实际上，this 值可以是任何接受单个参数（表示新数组的长度）的构造函数。当将可迭代的作为 arrayLike 传递时，构造函数将使用无参数调用；当将类数组对象传递时，构造函数将使用类数组对象的 规范化长度 调用。当迭代完成时，最终的 length 将再次被设置。如果 this 值不是构造函数，则使用普通 Array 构造函数代替。

Array.from() 静态方法从 可迭代的 或 类数组 对象创建一个新的、浅层复制的 Array 实例。
Array.from("foo");
// [ "f", "o", "o" ]

从字符串创建数组

Array.from() 静态方法从 可迭代的 或 类数组 对象创建一个新的、浅层复制的 Array 实例。
const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]

从集合创建数组

Array.from() 静态方法从 可迭代的 或 类数组 对象创建一个新的、浅层复制的 Array 实例。
const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([
  ["1", "a"],
  ["2", "b"],
]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

从映射创建数组

Array.from() 静态方法从 可迭代的 或 类数组 对象创建一个新的、浅层复制的 Array 实例。
// Create an array based on a property of DOM Elements
const images = document.querySelectorAll("img");
const sources = Array.from(images, (image) => image.src);
const insecureSources = sources.filter((link) => link.startsWith("http://"));

从节点列表创建数组

Array.from() 静态方法从 可迭代的 或 类数组 对象创建一个新的、浅层复制的 Array 实例。
function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

从类数组对象（参数）创建数组

Array.from() 静态方法从 可迭代的 或 类数组 对象创建一个新的、浅层复制的 Array 实例。
// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

使用箭头函数和 Array.from()

Array.from() 静态方法从 可迭代的 或 类数组 对象创建一个新的、浅层复制的 Array 实例。
// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP, etc.)
const range = (start, stop, step) =>
  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);

// Generate numbers range 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// Generate numbers range 1..10 with step of 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// Generate the alphabet using Array.from making use of it being ordered as a sequence
range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) =>
  String.fromCharCode(x),
);
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

序列生成器（范围）

对非数组构造函数调用 from()

Array.from() 静态方法从 可迭代的 或 类数组 对象创建一个新的、浅层复制的 Array 实例。
function NotArray(len) {
  console.log("NotArray called with length", len);
}

// Iterable
console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"])));
// NotArray called with length undefined
// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 }

// Array-like
console.log(Array.from.call(NotArray, { length: 1, 0: "foo" }));
// NotArray called with length 1
// NotArray { '0': 'foo', length: 1 }

from() 方法可以调用任何接受单个参数（表示新数组的长度）的构造函数。

Array.from() 静态方法从 可迭代的 或 类数组 对象创建一个新的、浅层复制的 Array 实例。
console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ]

规范

当 this 值不是构造函数时，将返回一个普通的 Array 对象。
规范
# ECMAScript 语言规范

浏览器兼容性

sec-array.from

另请参阅