【面试常见问题】深拷贝与浅拷贝

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

// 修改原对象中的嵌套对象
original.b.c = 3;

console.log(original); // { a: 1, b: { c: 3 } }
console.log(shallowCopy); // { a: 1, b: { c: 3 } } 注意b.c也被修改了

展开运算符 `...`

javascript 复制代码

let originalArray = [1, { a: 2 }];
let shallowCopiedArray = [...originalArray];

// 修改原数组中的对象
originalArray[1].a = 3;

console.log(originalArray); // [1, { a: 3 }]
console.log(shallowCopiedArray); // [1, { a: 3 }] 数组中的对象被修改了

二、深拷贝详解

定义与重要性

深拷贝创建一个新对象，并递归地复制原对象的所有属性，直至最底层的基本数据类型，确保原对象与拷贝对象在内存中完全独立。

面试技巧

面试高频问题：如何实现深拷贝？手动实现深拷贝是面试中的经典问题，考察点在于对递归、对象类型判断以及处理循环引用的能力。
方法介绍 ：可以使用JSON的 parse 和 stringify 方法进行简单深拷贝（但注意这种方法的局限性，如无法处理函数和循环引用），或手写递归函数实现更全面的解决方案。

代码示例

手动递归实现

javascript 复制代码

function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    let copy = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopy(obj[key]);
        }
    }
    return copy;
}

let original = { a: 1, b: { c: 2 } };
let deepCopied = deepCopy(original);

original.b.c = 3;

console.log(original); // { a: 1, b: { c: 3 } }
console.log(deepCopied); // { a: 1, b: { c: 2 } } 深拷贝后的对象不受影响

使用JSON方法（简单情况）

javascript 复制代码

let originalSimple = { a: 1, b: 2 };
let deepCopiedSimple = JSON.parse(JSON.stringify(originalSimple));

// 假设我们尝试修改原对象
originalSimple.a = 3;

console.log(originalSimple); // { a: 3, b: 2 }
console.log(deepCopiedSimple); // { a: 1, b: 2 } 深拷贝对象不受影响

// 注意：此方法不适用于含有函数、RegExp、Date等特殊类型或循环引用的对象

使用第三方库lodash

javascript 复制代码

// 首先确保已经安装并导入了lodash
import _ from 'lodash';

let originalLodash = { a: 1, b: { c: 2 } };
let deepCopiedLodash = _.cloneDeep(originalLodash);

originalLodash.b.c = 3;

console.log(originalLodash); // { a: 1, b: { c: 3 } }
console.log(deepCopiedLodash); // { a: 1, b: { c: 2 } } 完全独立

三、深拷贝与浅拷贝的选择依据

数据独立性：需要完全隔离数据修改时，选择深拷贝。
性能考量：浅拷贝更轻量，适合简单数据结构或性能敏感场景。
对象复杂度：面对多层嵌套或特殊类型（如函数、循环引用）时，深拷贝更为合适。

四、拓展知识

循环引用问题：在复杂的对象结构中，对象之间可能存在循环引用，这在深拷贝时需要特别处理，否则可能导致栈溢出。
第三方库实现：了解并提及一些第三方库（如lodash的_.cloneDeep）提供的深拷贝功能，展现对生态的熟悉度。

掌握深拷贝与浅拷贝不仅是面试成功的关键，更是JavaScript高级开发不可或缺的知识点。通过深入理解其原理、实践操作及潜在问题，你将能在面试中脱颖而出，同时在日常开发中避免数据处理的常见bug。