JavaScript 中 Array.prototype.slice 怎么实现一维数组的浅拷贝-js教程-PHP中文网

array.prototype.slice() 是一维数组浅拷贝最常用方法，不修改原数组，返回新数组；复制原始值和引用地址，嵌套对象仍共享引用，不拷贝额外属性或处理稀疏数组空槽。

javascript 中 array.prototype.slice 怎么实现一维数组的浅拷贝

Array.prototype.slice() 是 JavaScript 中最常用、最简洁的一维数组浅拷贝方法。它不修改原数组，而是返回一个新数组，包含从开始索引到结束索引（不包括结束索引）之间的元素。

为什么 slice() 能实现浅拷贝

因为 slice() 内部会遍历原数组的每个索引位置，把对应位置的值（即引用或原始值）直接复制到新数组中。对一维数组来说，所有元素都是顶层值——原始类型（如 number、string、boolean）直接复制值；对象/数组等引用类型则复制引用地址。这正符合“浅拷贝”的定义。

基本用法：空参数即可完整拷贝

调用 slice() 时不传任何参数，等价于 slice(0)，会复制整个数组：

Gradle 9.8.0

下载

const arr = [1, 'a', true, { x: 1 }];
const copy = arr.slice(); // [1, 'a', true, { x: 1 }]

console.log(copy === arr); // false（不是同一个数组）
console.log(copy[3] === arr[3]); // true（对象引用相同）

注意事项和常见误区

只适用于一维数组：如果原数组包含嵌套数组或对象，slice() 不会递归拷贝，内部对象仍共享引用
不处理稀疏数组的“空槽”语义：例如 [1, , 3] 中的空位会被转换为 undefined 元素（但行为与现代引擎一致，通常无需担心）
无法拷贝数组的额外属性：如果给数组添加了自定义属性（如 arr.name = 'myList'），slice() 返回的新数组不会继承这些属性
对类数组对象无效：需先转为真数组（如用 Array.from() 或 [...arrayLike]）再调用 slice()

替代写法（效果等价）

以下写法在功能上与 arr.slice() 完全一致，也属于浅拷贝：

const copy1 = [...arr];           // 展开运算符
const copy2 = Array.from(arr);   // Array.from()
const copy3 = arr.concat();      // concat() 不传参（已不推荐，仅作了解）

其中 [...arr] 和 Array.from(arr) 更现代、语义更清晰，但 slice() 兼容性最好（支持 IE9+），且意图明确——“切片即复制”。