深入理解前端面试难点：深拷贝与浅拷贝的实现原理-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00394/article/details/148577910

深入理解前端面试难点：深拷贝与浅拷贝的实现原理

frontend-hard-mode-interview 《前端内参》，有关于JavaScript、编程范式、设计模式、软件开发的艺术等大前端范畴内的知识分享，旨在帮助前端工程师们夯实技术基础以通过一线互联网企业技术面试。项目地址: https://gitcode.com/gh_mirrors/fr/frontend-hard-mode-interview

前言

在前端开发中，深拷贝与浅拷贝是一个常见且重要的概念，也是面试中经常被考察的知识点。本文将全面解析深拷贝与浅拷贝的原理、实现方式以及各种方案的优缺点，帮助开发者深入理解这一核心概念。

什么是深拷贝与浅拷贝？

基本概念

深拷贝是指创建一个新对象，完全复制原对象的所有属性值，包括嵌套的对象。深拷贝后的对象与原对象完全独立，修改其中一个不会影响另一个。

浅拷贝则只复制对象的第一层属性，如果属性值是引用类型，则复制的是引用地址而非实际值。因此，修改浅拷贝对象的引用类型属性会影响原对象。

JavaScript中的表现

JavaScript中的基本数据类型（string、number、bigint、boolean、null、undefined、symbol）都是值传递，相当于自动进行深拷贝。而对象(Object)类型则是引用传递，默认的复制操作都是浅拷贝。

常见的深拷贝实现方案

1. JSON序列化法

let copy = JSON.parse(JSON.stringify(original));

优点：

实现简单
适用于大多数简单对象

缺点：

无法处理函数属性
忽略undefined和symbol属性
不支持特殊对象类型(Date, RegExp等)
无法处理循环引用

2. Object.assign方法

let copy = Object.assign({}, original);

优点：

原生支持，无需额外代码
适用于简单对象

缺点：

只能实现一层深拷贝
无法复制不可枚举属性
无法处理嵌套对象

3. MessageChannel方法

function deepCopy(obj) {
  return new Promise((resolve) => {
    const {port1, port2} = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}

优点：

可以处理循环引用
支持更多内置类型

缺点：

异步操作
仍然无法处理函数属性

递归实现完美深拷贝

基础递归实现

function deepCopy(obj) {
    let result = {};
    for (let key in obj) {
        if (obj[key] && typeof obj[key] === 'object') {
            result[key] = deepCopy(obj[key]);
        } else {
            result[key] = obj[key];
        }
    }
    return result;
}

处理循环引用

function deepCopy(obj, parent = null) {
    let result = {};
    let _parent = parent;
    while (_parent) {
        if (_parent.originalParent === obj) {
            return _parent.currentParent;
        }
        _parent = _parent.parent;
    }
    // ...其余代码
}

使用WeakMap优化

function deepCopy(obj) {
    let map = new WeakMap();
    function dp(obj) {
        if (map.has(obj)) return map.get(obj);
        // ...拷贝逻辑
        map.set(obj, result);
        return result;
    }
    return dp(obj);
}