Array.from() 是 JavaScript 中一个超级强劲的数组方法，它既能将类数组对象 / 可迭代对象转为数组，又能在转换过程中执行映射操作，轻松替代繁琐的 for 循环初始化。以下是 5 个「神仙用法」，让数组初始化更简洁优雅：

1. 初始化固定长度数组并设置初始值

用 for 循环初始化数组时，需要手动控制长度和赋值，而 Array.from() 可以一行搞定：

// 传统 for 循环：初始化长度为 5，每个元素为 0
const arr1 = [];
for (let i = 0; i < 5; i++) {
  arr1.push(0);
}

// Array.from() 写法
const arr2 = Array.from({ length: 5 }, () => 0); 
// 结果：[0, 0, 0, 0, 0]

原理：{ length: 5 } 模拟类数组对象（仅需 length 属性），第二个参数作为映射函数，为每个位置赋值。

2. 生成范围数字数组（如 1~10）

生成连续范围的数字时，for 循环需要逐个 push，Array.from() 结合索引更简洁：

// 传统 for 循环：生成 1~10 的数组
const range1 = [];
for (let i = 1; i <= 10; i++) {
  range1.push(i);
}

// Array.from() 写法
const range2 = Array.from({ length: 10 }, (_, i) => i + 1); 
// 结果：[1, 2, 3, ..., 10]

优势：通过映射函数的第二个参数 i（索引），直接计算目标值，无需额外变量。

3. 处理 DOM 集合（类数组对象）

DOM 操作中获取的集合（如 NodeList）是类数组，for 循环遍历前需先转数组，Array.from() 可一步完成转换 + 处理：

// 传统 for 循环：获取所有 div 并添加类名
const divs1 = document.querySelectorAll('div');
const arrDivs1 = [];
for (let i = 0; i < divs1.length; i++) {
  arrDivs1.push(divs1[i]);
  divs1[i].classList.add('active');
}

// Array.from() 写法：转换的同时添加类名
const arrDivs2 = Array.from(document.querySelectorAll('div'), div => {
  div.classList.add('active');
  return div;
});

优势：合并「转数组」和「处理元素」两步操作，代码更紧凑。

4. 数组去重（利用 Set 的唯一性）

Set 可快速去重，但返回的是类数组，Array.from() 可直接转为去重后的数组：

// 传统 for 循环：数组去重
const arr = [1, 2, 2, 3, 3, 3];
const unique1 = [];
for (let i = 0; i < arr.length; i++) {
  if (!unique1.includes(arr[i])) {
    unique1.push(arr[i]);
  }
}

// Array.from() + Set 写法
const unique2 = Array.from(new Set(arr)); 
// 结果：[1, 2, 3]

优势：一行代码完成去重，时间复杂度从 O(n²)（includes 遍历）降为 O(n)（Set 哈希查找）。

5. 初始化二维数组（如矩阵）

创建多维数组时，for 循环需要嵌套，Array.from() 可通过嵌套调用简化：

// 传统 for 循环：创建 3x3 的二维数组（初始值为 0）
const matrix1 = [];
for (let i = 0; i < 3; i++) {
  matrix1[i] = [];
  for (let j = 0; j < 3; j++) {
    matrix1[i][j] = 0;
  }
}

// Array.from() 写法
const matrix2 = Array.from({ length: 3 }, () => 
  Array.from({ length: 3 }, () => 0)
); 
// 结果：[[0,0,0], [0,0,0], [0,0,0]]

优势：避免嵌套循环的冗余代码，逻辑更清晰。

总结

Array.from() 的核心价值在于：将「创建数组」和「处理元素」合并为一步，尤其适合初始化有规律的数组、转换类数组对象等场景。相比 for 循环，它的代码更简洁、可读性更高 。