JavaScript有哪些常用的浅拷贝方法

在JavaScript开发中，浅拷贝是处理对象复制的基础操作，它仅复制对象的顶层属性，对于嵌套的引用类型属性，只会复制其引用地址，不会创建新的嵌套对象。下面介绍几种常用的浅拷贝实现方法。

1. 使用Object.assign方法

Object.assign是ES6提供的方法，用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，返回目标对象，它是实现浅拷贝的常用方式之一。

使用示例如下：

// 定义源对象
const sourceObj = {
    name: '张三',
    age: 25,
    hobby: ['篮球', '足球']
};
// 使用Object.assign进行浅拷贝
const copyObj = Object.assign({}, sourceObj);
console.log(copyObj.name); // 输出：张三
console.log(copyObj.hobby === sourceObj.hobby); // 输出：true，说明嵌套的数组是同一个引用

// 修改拷贝对象的顶层属性，不会影响源对象
copyObj.name = '李四';
console.log(sourceObj.name); // 输出：张三

// 修改拷贝对象的嵌套引用类型属性，会影响源对象
copyObj.hobby.push('羽毛球');
console.log(sourceObj.hobby); // 输出：['篮球', '足球', '羽毛球']

2. 使用扩展运算符(...)

扩展运算符也是ES6引入的语法，可以快速将对象的属性展开到新的对象中，同样可以实现浅拷贝，写法比Object.assign更简洁。

使用示例如下：

// 定义源对象
const sourceObj = {
    id: 1,
    info: {
        address: '北京',
        phone: '123456'
    }
};
// 使用扩展运算符进行浅拷贝
const copyObj = { ...sourceObj };
console.log(copyObj.id); // 输出：1
console.log(copyObj.info === sourceObj.info); // 输出：true，嵌套对象是同一个引用

// 修改顶层属性不影响源对象
copyObj.id = 2;
console.log(sourceObj.id); // 输出：1

// 修改嵌套引用类型属性会影响源对象
copyObj.info.address = '上海';
console.log(sourceObj.info.address); // 输出：上海

3. 数组的slice方法

如果需要对数组进行浅拷贝，可以使用数组原生的slice方法，该方法返回一个新的数组对象，不会修改原数组，属于浅拷贝。

使用示例如下：

// 定义源数组
const sourceArr = [1, 2, { name: '测试' }];
// 使用slice方法浅拷贝数组，不传参数默认拷贝整个数组
const copyArr = sourceArr.slice();
console.log(copyArr[0]); // 输出：1
console.log(copyArr[2] === sourceArr[2]); // 输出：true，数组中的对象引用相同

// 修改拷贝数组的基本类型元素，不影响源数组
copyArr[0] = 3;
console.log(sourceArr[0]); // 输出：1

// 修改拷贝数组中的引用类型元素，会影响源数组
copyArr[2].name = '新测试';
console.log(sourceArr[2].name); // 输出：新测试

4. 数组的concat方法

数组的concat方法用于合并两个或多个数组，返回一个新的数组，当不传入其他数组时，也可以用来实现数组的浅拷贝。

使用示例如下：

// 定义源数组
const sourceArr = ['a', 'b', { count: 10 }];
// 使用concat方法浅拷贝数组
const copyArr = sourceArr.concat();
console.log(copyArr[1]); // 输出：b
console.log(copyArr[2] === sourceArr[2]); // 输出：true

// 修改基本类型元素不影响源数组
copyArr[1] = 'c';
console.log(sourceArr[1]); // 输出：b

// 修改引用类型元素会影响源数组
copyArr[2].count = 20;
console.log(sourceArr[2].count); // 输出：20

不同浅拷贝方法的适用场景

不同的浅拷贝方法适用场景有所区别，具体可以参考下表：

需要注意的是，浅拷贝只适用于顶层属性都是基本类型，或者不需要对嵌套引用类型做独立修改的场景，如果需要对嵌套引用类型也进行复制，就需要使用深拷贝方案。

JavaScript浅拷贝Object_assign扩展运算符slice修改时间：2026-06-09 17:18:28