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

      

目录

一、浅拷贝基础

定义与原理

面试知识点扩展

代码示例

使用 Object.assign()

展开运算符 ...

二、深拷贝详解

定义与重要性

面试技巧

代码示例

手动递归实现

使用JSON方法（简单情况）

使用第三方库lodash

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

四、拓展知识

---

         在技术面试中，深拷贝（Deep Copy）与浅拷贝（Shallow Copy）是考察JavaScript基础与理解对象复制机制的常见话题。掌握这两者不仅有助于解决实际开发中的数据隔离问题，还能在面试中展示你对JavaScript核心概念的深入理解。

一、浅拷贝基础

定义与原理

        浅拷贝创建一个新对象，其属性值是对原对象属性值的直接引用（对于非原始类型的属性）。这意味着如果原对象的属性是引用类型（如数组、对象），修改这些引用类型的数据会影响到拷贝对象。

面试知识点扩展

• 实现方式：JavaScript中实现浅拷贝的方法包括 Object.assign()、展开运算符 ...、以及直接赋值（对于数组或对象的第一层）。
• 陷阱：面试官可能会询问浅拷贝在处理嵌套对象或数组时的问题，强调浅拷贝的局限性，比如上述方法在处理深层结构时的不足。

代码示例

使用 Object.assign()

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也被修改了
'
运行
运行

展开运算符 ...

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 方法进行简单深拷贝（但注意这种方法的局限性，如无法处理函数和循环引用），或手写递归函数实现更全面的解决方案。

代码示例

手动递归实现

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方法（简单情况）

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

// 首先确保已经安装并导入了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。