展开运算符对类数组对象转换是浅拷贝：新数组独立，但引用类型元素仍共享内存；需根据数据类型选择是否叠加对象展开、cloneNode或structuredClone等处理。
展开运算符对类数组对象（如 arguments、NodeList、HTMLCollection）做转换时，本质是“结构提取 + 浅拷贝”，它不创建深副本，也不自动处理内部嵌套引用。关键在于：它只保证最外层结构被复制为真数组或新对象，但其中的元素若为引用类型，仍共享内存。
类数组对象转数组时的浅拷贝表现
使用 [...arrayLike] 将类数组转为数组，属于浅拷贝操作：
- 新数组本身是独立的，与原类数组无引用关系
- 数组内每个元素按值复制——基本类型（数字、字符串等）完全隔离；引用类型（如 DOM 元素、对象、子数组）仅复制其引用
- 例如：
const list = document.querySelectorAll('div');→const arr = [...list];，arr是新数组，但arr[0] === list[0]仍为true
避免嵌套引用副作用的实用做法
当类数组中包含需独立操作的对象或嵌套结构时，不能只依赖展开，需叠加处理：
- 对含普通对象的类数组：用
[...arrayLike].map(x => ({...x}))对每个对象做一层浅拷贝 - 对含 DOM 元素且需移除/重排的场景：先展开，再用
.map(el => el.cloneNode(true))深度克隆节点（注意cloneNode是 DOM 原生深拷贝） - 若类数组项是数组（如
[[1,2], [3,4]]），而你希望子数组也独立：需手动递归或用JSON.parse(JSON.stringify())（仅限纯数据）或structuredClone()（现代环境支持）
与 Array.from() 的行为对比
Array.from(arrayLike) 和 [...arrayLike] 在结果上几乎一致，都是生成新数组并浅拷贝元素。区别在于：
-
Array.from()支持映射函数，可一步完成转换+浅拷贝：Array.from(list, el => ({...el})) -
Array.from()能正确处理空位（sparse array），而展开运算符会将空位转为undefined - 两者都不解决嵌套引用问题，该限制完全相同
什么情况下可以放心只用展开？
当类数组内容满足以下任一条件时，[...arrayLike] 就足够安全：
- 所有项都是基本类型（如
arguments中的数字、字符串） - 项是 DOM 元素，且你只读取属性或绑定事件，不调用
remove()或修改其子树 - 你明确接受“副本与原始项共享内部状态”，比如共用同一个配置对象用于渲染
