Array.from 是 JavaScript 中实现“构造即转换”的数组创建方法，支持类数组/可迭代对象转数组、内置映射、结构化提取、按需生成及默认值安全解构。
Array.from 是 JavaScript 中一个强大且灵活的数组创建方法，它不仅能将类数组对象或可迭代对象转为真正的数组，还能在创建过程中直接完成映射、过滤、甚至条件生成等高阶函数式转换——无需先创建再链式调用 map 或 filter。
一、一步到位：在 Array.from 中嵌入映射逻辑
Array.from 的第二个参数是一个映射函数，作用等同于 Array.prototype.map，但它在数组构建阶段就执行，避免了额外的遍历开销。
例如，将字符串中每个字符转为大写并去重：
const str = 'hello'; const upperUnique = Array.from(new Set(str), char => char.toUpperCase()); // ['H', 'E', 'L', 'O']
关键点：
立即学习“Java免费学习笔记（深入）”；
- 第一个参数是可迭代对象（如
Set、Map.keys()、arguments、NodeList） - 第二个参数接收当前项、索引、源对象，返回新值
- 不支持跳过元素（如 filter），但可通过返回
undefined+ 后续filter(Boolean)模拟
二、配合 Array-like 对象实现结构化提取
DOM 查询结果（如 document.querySelectorAll）是类数组对象，用 Array.from 可直接提取属性并转换：
const buttons = document.querySelectorAll('button');
const disabledStates = Array.from(buttons, btn => btn.disabled);
const texts = Array.from(buttons, ({textContent}) => textContent.trim());
这种写法比 [...buttons].map(...) 更语义清晰，且兼容性更好（支持 IE11+，而展开运算符需 Babel 转译）。
三、按需生成：用 Array.from 创建带逻辑的数组
Array.from 还支持传入一个数字作为长度，并通过映射函数生成对应位置的值，适合实现序列、坐标、索引映射等场景：
// 生成 [0, 1, 2, ..., 9]
Array.from({length: 10}, (_, i) => i);
// 生成前 5 个斐波那契数
Array.from({length: 5}, (_, i, arr) =>
i <= 1 ? i : arr[i-1] + arr[i-2]
); // [0, 1, 1, 2, 3]
// 创建 3×3 网格坐标
Array.from({length: 9}, (_, i) => [Math.floor(i/3), i % 3]);
注意：arr 参数指向正在构建的数组，可用于依赖前序值的计算，但此时数组尚未完全创建完毕，仅包含已计算出的前 i 项。
四、与解构/默认值结合，处理稀疏或不规则数据
当源对象存在空位（sparse array）或缺失属性时，映射函数内可安全解构并设默认值：
const data = [{name: 'Alice'}, {}, {name: 'Bob'}, null];
const names = Array.from(data, ({name = 'Anonymous'} = {}) => name);
// ['Alice', 'Anonymous', 'Bob', 'Anonymous']
这里利用了参数默认值 + 解构默认值双重保护，避免 Cannot destructure property 报错。
Array.from 的核心优势在于“构造即转换”——把创建和变换合并为一次操作，既提升可读性，又减少中间数组的内存开销。合理搭配可迭代对象、映射函数和上下文参数，就能写出简洁有力的函数式数组处理逻辑。
