数组的Array.from

Array.from() 允许你从类数组对象（拥有一个 length 属性和可索引的元素）或可迭代对象（例如 Map 和 Set）创建一个新的数组实例。

基本用法

Array.from(arrayLike, mapFn, thisArg)

• arrayLike: 要转换成数组的类数组对象或可迭代对象。
• mapFn (可选): 如果提供了该参数，新数组中的每个元素都会执行这个函数。
  • element：数组正在处理的元素。
  • index：数组正在处理元素的索引。
• thisArg (可选): 执行 mapFn 函数时 this 的值。

返回值：一个新的数组实例

示例

从字符串创建数组

Array.from('foo'); // ['f', 'o', 'o']

从类数组对象转换

function toArray() {
  return Array.from(arguments);
}

toArray(1, 2, 3); // [1, 2, 3]

从Set转换

如果你有一个 Set 对象，你可以将其转换为数组。

const s = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(s); // ["foo", "bar", "baz"]

使用箭头函数

Array.from([1, 2, 3], x => x + x); // [2, 4, 6]

Array.from({ length: 5 }, (v, i) => i);  // [0, 1, 2, 3, 4]

构造一个序列生成器

// 序列生成器函数（通常称为“range”，例如 Clojure、PHP 等）
const range = (start, stop, step) =>
  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);

// 生成的数字范围 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// 生成的数字范围 1..10，步长为 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// 使用 Array.from 生成字母表，并将其序列排序
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"]

使用场景

• 当你需要将非数组对象（如 NodeList 对象、函数的 arguments 对象）转换为真正的数组时。
• 当你想要复制一个数组时。
• 当你需要将一个可迭代对象（如 Set 或 Map）转换为数组时。
• 当你想要在创建数组的同时对其元素进行映射处理时。