JavaScript Array.from创建指定长度数组的技巧

Array.from 是 JavaScript 中一个强大且灵活的方法，用于从类数组对象或可迭代对象创建新数组。它不仅能简单地转换数据，还能通过其第二个参数实现复杂的数组初始化逻辑，尤其适合创建指定长度的数组并填充特定内容。

基础用法

Array.from 的基本语法是 Array.from(arrayLike[, mapFn[, thisArg]])。

1. 理解 arrayLike 参数：它是一个类数组对象或可迭代对象，Array.from 会将其转换为数组。
2. 了解 mapFn 参数（可选）：一个映射函数，用于对每个元素进行处理后再添加到新数组中。
3. 熟悉 thisArg 参数（可选）：执行 mapFn 时使用的 this 值。

// 从类数组对象创建数组
function foo() {
  return Array.from(arguments);
}
console.log(foo(1, 2, 3)); // 输出: [1, 2, 3]

// 从可迭代对象创建数组
const set = new Set([1, 2, 3]);
const arr = Array.from(set);
console.log(arr); // 输出: [1, 2, 3]

核心技巧：创建指定长度数组

Array.from 创建指定长度数组的关键在于使用一个包含 length 属性的对象作为第一个参数。

1. 创建 一个长度为 n 的数组，元素默认为 undefined：

   const length = 5;
   const arr = Array.from({ length });
   console.log(arr); // 输出: [undefined, undefined, undefined, undefined, undefined]

2. 利用 第二个参数（映射函数）来初始化数组元素：

   const length = 5;
   const arr = Array.from({ length }, () => 0);
   console.log(arr); // 输出: [0, 0, 0, 0, 0]

高级应用：填充特定内容

通过自定义映射函数，你可以创建包含各种内容的数组。

1. 创建 一个包含索引的数组（[0, 1, 2, ..., n-1]）：

   const length = 5;
   const arr = Array.from({ length }, (_, index) => index);
   console.log(arr); // 输出: [0, 1, 2, 3, 4]

2. 创建 一个包含特定值的数组（如全为 1）：

   const length = 5;
   const arr = Array.from({ length }, () => 1);
   console.log(arr); // 输出: [1, 1, 1, 1, 1]

3. 创建 一个包含特定对象的数组（如 [{ id: 1 }, { id: 2 }, ...]）：

   const length = 3;
   const arr = Array.from({ length }, (_, index) => ({ id: index + 1 }));
   console.log(arr); // 输出: [{ id: 1 }, { id: 2 }, { id: 3 }]

与其他方法的对比

虽然 Array.from({ length: n }) 功能强大，但了解其他方法有助于你根据场景选择最合适的工具。

对比示例：

// 创建长度为 5 的数组，元素为 0
const arrFrom = Array.from({ length: 5 }, () => 0);
const arrFill = new Array(5).fill(0);
const arrKeys = [...Array(5).keys()];

console.log(arrFrom); // [0, 0, 0, 0, 0]
console.log(arrFill); // [0, 0, 0, 0, 0]
console.log(arrKeys); // [0, 1, 2, 3, 4]

注意事项与最佳实践

1. 性能考虑：对于非常大的数组，new Array(n).fill() 的性能通常优于 Array.from，因为它不需要遍历和调用映射函数。
2. 灵活性优先：当你需要根据索引或其他逻辑动态生成数组元素时，Array.from 是最佳选择。
3. 避免稀疏数组：new Array(n) 创建的是稀疏数组，某些数组方法（如 map）可能不会处理 undefined 元素。如果你需要确保每个位置都有值，使用 fill 或 Array.from。