JavaScript对象的深拷贝和浅拷贝 - 2024最新版前端秋招面试短期突击面试题【100道】

JavaScript对象的深拷贝和浅拷贝 - 2024最新版前端秋招面试短期突击面试题【100道】 📋

在JavaScript中，对象的深拷贝和浅拷贝是处理对象复制时的重要概念。了解这两种拷贝方式的区别及实现方法，可以帮助你更好地管理和操作对象数据。

浅拷贝（Shallow Copy） 🌊

浅拷贝只会复制对象的第一层属性。如果属性值是基本类型，则拷贝的是基本类型的值；如果属性值是引用类型，则拷贝的是内存地址。这意味着原始对象和浅拷贝对象会共享引用类型的属性。

实现浅拷贝的几种方法

使用 Object.assign 方法：

javascript 复制代码

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

使用扩展运算符（Spread Operator）：

javascript 复制代码

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

示例

javascript 复制代码

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

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

深拷贝（Deep Copy） 🕵️‍♂️

深拷贝会复制对象的所有层级属性。如果属性值是基本类型，则拷贝的是基本类型的值；如果属性值是引用类型，则会创建一个新的对象或数组，并递归复制其所有属性。

实现深拷贝的几种方法

使用 JSON.parse 和 JSON.stringify：
javascript 复制代码
```
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
```
注意：这种方法不能复制函数、undefined、循环引用等。

手动实现递归深拷贝：

javascript 复制代码

function deepClone(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj; // 如果不是复杂数据类型，直接返回
    }
    let clone;
    if (Array.isArray(obj)) {
        clone = [];
        for (let i = 0; i < obj.length; i++) {
            clone[i] = deepClone(obj[i]);
        }
    } else {
        clone = {};
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                clone[key] = deepClone(obj[key]);
            }
        }
    }
    return clone;
}

const original = { a: 1, b: { c: 2 } };
const deepCopy = deepClone(original);

使用第三方库，如 lodash 的 _.cloneDeep 方法：

javascript 复制代码

const original = { a: 1, b: { c: 2 } };
const deepCopy = _.cloneDeep(original);

示例

javascript 复制代码

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 3; // 修改深拷贝对象的属性
console.log(original.b.c); // 输出 2，原始对象的属性没有被改变

选择深拷贝还是浅拷贝 🤔

选择使用深拷贝还是浅拷贝取决于你的具体需求：

深拷贝：如果你需要完全独立的副本，避免原始数据被意外修改，应该使用深拷贝。
浅拷贝：如果你知道不会修改原始对象中的引用类型属性，或者需要共享属性引用，那么浅拷贝可能就足够了。

通过掌握深拷贝和浅拷贝的实现方法及其适用场景，你将能够更灵活地处理JavaScript中的对象，提升你的开发效率和能力，祝你在面试中取得好成绩！