JavaScript 浅拷贝与深拷贝原理及多种实现方式详解

浅拷贝与深拷贝的核心概念

本文通过具体实例，详细解析了 JavaScript 中浅拷贝与深拷贝的工作机制及具体实现代码，旨在为开发者提供清晰的参考指南。

浅拷贝仅对对象的第一层属性进行复制，若属性值为引用类型（如对象或数组），其内部数据仍指向原地址，因此修改深层引用类型的数据时，原对象会受到影响。

深拷贝则会对对象内部的所有属性及值进行完全独立的复制，无论引用类型嵌套多深，新对象与原对象在内存中完全隔离，修改新对象的深层数据不会影响原对象。

浅拷贝的常见实现方式

以下是几种常见的浅拷贝实现方案：

1、自定义函数实现

function shallowClone (initalObj) {
   var obj = {};
   for ( var i in initalObj) {
    obj[i] = initalObj[i];
   }
   return obj;
}

2、利用 ES6 提供的 Object.assign() 方法

let newObj = Object.assign({}, obj);

3、使用 ES6 的对象扩展运算符（Spread Operator）

let newObj = {...obj};

深拷贝的多种实现方案

接下来介绍几种深拷贝的实现路径：

1、通过 JSON 序列化与反序列化实现

该方法利用 JSON.stringify 将目标对象序列化为 JSON 字符串，随后使用 JSON.parse 将该字符串解析并生成一个全新的对象。

此方法存在局限性，仅适用于可转换为标准 JSON 格式的对象。若对象中包含函数（Function）、正则表达式（RegExp）或 undefined 等类型，转换过程会丢失这些数据或引发错误。

let newObj = JSON.parse(JSON.stringify(obj));

2、借助 jQuery 或 Zepto 库

在 jQuery 和 Zepto 库中，可以使用 $.extend 方法并传入 true 作为第一个参数，从而实现深拷贝功能。

var $ = require('jquery');
var newObj = $.extend(true, {}, obj);

3、使用 Lodash 库

Lodash 库提供了专门的工具函数 _.cloneDeep，能够安全且高效地实现深拷贝，是处理复杂对象结构的推荐方案。

var _ = require('lodash');
var newObj = _.cloneDeep(obj);

4、手动封装深拷贝函数

deepClone = (obj) => {
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
      // for...in 会把继承的属性一起遍历
      for(let key in obj){
        // 判断是不是自有属性，而不是继承属性
        if(obj.hasOwnProperty(key)){
          //判断ojb子元素是否为对象或数组，如果是，递归复制
          if(obj[key]&&typeof obj[key] ==="object"){
            objClone[key] = this.deepClone(obj[key]);
          }else{
            //如果不是，简单复制
            objClone[key] = obj[key];
          }
        }
      }
    }
    return objClone;
}

参考链接：https://www.jb51.net/article/99013.htm

如需了解更多 JavaScript 相关知识，可查阅本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望上述关于 JavaScript 程序设计的内容能对您的开发工作有所帮助。