Array.from()是ES6将类数组或可迭代对象转为真数组的方法，需满足有非负整数length属性和数字索引键；支持映射回调、浅拷贝，不支持null/undefined。
Array.from() 是 ES6 提供的专门用于将类数组对象或可迭代对象转为真数组的方法，语法简洁、语义明确，比传统 Array.prototype.slice.call() 更直观可靠。
类数组对象必须满足两个基本条件
不是所有带属性的对象都能被正确转换。要让 Array.from() 成功生成有意义的数组，类数组对象需同时满足：
- 必须有
length属性，且值为非负整数（决定结果数组长度） - 索引属性名必须是数字或可转为数字的字符串（如
"0"、"1"、2），其他键名（如"name"、"age"）会被忽略
例如：
✅ 正确结构（能转出有效数组）：const obj = {0: "a", 1: "b", 2: "c", length: 3};Array.from(obj); // ["a", "b", "c"]
❌ 缺少 length（返回空数组）：const obj = {0: "a", 1: "b"};Array.from(obj); // []
⚠️ 有 length 但索引不匹配（填充 undefined）：const obj = {2: "c", length: 4};Array.from(obj); // [undefined, undefined, "c", undefined]
常见真实场景中的使用方式
开发中最常遇到的类数组对象来自 DOM 操作和函数参数，Array.from() 可直接处理：
-
DOM 节点集合：如
document.querySelectorAll()或getElementsByTagName()返回的NodeList -
函数内部的 arguments：在非箭头函数中，
arguments是典型的类数组对象
示例：
const buttons = document.querySelectorAll("button");Array.from(buttons).forEach(btn => btn.addEventListener("click", handler));
function sum() { return Array.from(arguments).reduce((a, b) => a + b, 0);}sum(1, 2, 3); // 6
支持映射处理，一步到位
第二个参数可传入回调函数，类似 map()，在转换过程中对每个元素加工，避免后续再调用 .map()：
- 适用于需要提取属性、类型转换或条件处理的场景
- 回调接收两个参数：
item（当前值）、index（当前索引）
示例：
// 获取所有按钮的文本内容并转为大写const texts = Array.from(document.querySelectorAll("button"), btn => btn.textContent.toUpperCase());
// 将类数组对象 {0: "1", 1: "2", length: 2} 转为数字数组const nums = Array.from({0: "1", 1: "2", length: 2}, Number); // [1, 2]
注意浅拷贝与边界情况
Array.from() 创建的是新数组，但属于浅拷贝 —— 若原对象元素是引用类型（如对象、数组），新旧数组中对应项仍指向同一内存地址。
还需留意：
- 普通纯对象（无
length，无索引键）会转为空数组：Array.from({a: 1, b: 2}) // [] - Set / Map / 字符串等可迭代对象也能用，但它们不属于“类数组”，而是靠
Symbol.iterator接口支持 - 不支持
null或undefined作为第一个参数，会报错
