当前位置：首页 > article >正文

JS中浅拷贝和深拷贝的区别

article 2024/10/7 9:48:25

在JavaScript中，浅拷贝和深拷贝是用于复制对象或数组的两种不同方式，它们之间的主要区别在于对嵌套对象的处理。

浅拷贝 (Shallow Copy)

定义

浅拷贝创建一个新对象，该对象的属性值是原对象属性值的引用。对于嵌套的对象（即对象内还有对象），新对象只复制了最外层的属性，内部的对象引用仍然指向原对象的内存地址。

特点

引用共享：如果原对象的某个属性是对象或数组类型，浅拷贝后新对象的该属性依然指向原对象中的那个对象或数组。
性能较高：由于只复制一层属性，浅拷贝的性能通常比深拷贝好。
适用场景：当你只关心对象的第一层属性，或对象没有嵌套结构时，可以使用浅拷贝。

方法

使用 Object.assign()：

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);

使用展开运算符 (...)：
```
const shallowCopy = { ...original };
```

使用 Array.prototype.slice()（针对数组）：

const arr = [1, 2, 3];
const shallowArrCopy = arr.slice();

示例

let original = { a: 1, b: { c: 2 } };
let shallowCopy = { ...original }; // 使用展开运算符进行浅拷贝

shallowCopy.b.c = 3; // 修改浅拷贝的嵌套对象属性
console.log(original.b.c); // 输出: 3 (原对象也被改变了)

深拷贝 (Deep Copy)

定义

深拷贝会递归地复制所有层级的对象，包括嵌套的对象和数组，确保新对象与原对象在内存中完全独立。

特点

完全独立：深拷贝后的对象与原对象之间没有任何引用关系，任何对新对象的修改都不会影响原对象。
性能开销大：由于需要逐层复制，深拷贝通常比浅拷贝耗费更多的时间和内存。

适用场景：当对象包含多个嵌套层级，且需要对嵌套对象进行独立操作时，深拷贝是合适的选择。

方法
使用 JSON.parse() 和 JSON.stringify()：

const deepCopy = JSON.parse(JSON.stringify(original)); // 注意：不能处理函数、日期、undefined等

使用第三方库（如 Lodash）：

const _ = require('lodash');
const deepCopy = _.cloneDeep(original);

手动实现深拷贝：

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    if (Array.isArray(obj)) {
        return obj.map(item => deepClone(item));
    }
    const newObj = {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = deepClone(obj[key]);
        }
    }
    return newObj;
}

示例

let original = { a: 1, b: { c: 2 } };
let deepCopy = JSON.parse(JSON.stringify(original)); // 使用JSON方法进行深拷贝

deepCopy.b.c = 3; // 修改深拷贝的嵌套对象属性
console.log(original.b.c); // 输出: 2 (原对象未被改变)

总结对比表

特点	浅拷贝	深拷贝
复制层级	只复制第一层	递归复制所有层级
引用关系	共享引用	完全独立
性能	较高	较低
适用场景	对象无嵌套或只需复制一层	对象有嵌套，需要独立操作
实现方式	`Object.assign`、`...` 等	`JSON.parse` / `JSON.stringify`、Lodash 等