JavaScript中的浅拷贝和深拷贝原理与实现浅析

更新时间：2023年04月21日 10:50:38 作者：叶落风尘

这篇文章主要介绍了JavaScript中的浅拷贝和深拷贝原理与实现，JavaScript 中的浅拷贝和深拷贝指的是在复制对象（包括对象、数组等）时，是否只复制对象的引用地址或者在复制时创建一个新的对象

前言

JavaScript 中的浅拷贝和深拷贝指的是在复制对象（包括对象、数组等）时，是否只复制对象的引用地址或者在复制时创建一个新的对象。具体区别如下：

浅拷贝：浅拷贝只拷贝基本类型的数据，而符合类型的数据只复制指向其的指针，而不复制对象本身，新旧对象还是共享同一块内存。这意味着如果原始对象的属性或子对象发生更改，则复制的对象也会受到影响。常见的实现方式包括使用 Object.assign()方法、展开运算符(…)以及循环遍历对象并将其属性复制到新对象中。

深拷贝：深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

什么是浅拷贝

当我们进行 JavaScript 对象或数组的浅拷贝时，它只会复制其基本值的引用，而不是完全复制内容。也就是说，浅拷贝只是复制了原始对象的属性/元素的引用，并没有新建一个对象。

例如，如果我们有一个简单的对象：

const obj = { name: 'John', age: 30 };

然后我们使用对象的赋值语法来创建一个浅拷贝：

const newObj = obj;

此时，newObj 和 obj 都指向同一个内存地址。如果我们改变 newObj 的某个属性，那么 obj 的相应属性也会发生改变。

newObj.age = 40;
console.log(obj.age); // 输出 40

这是因为 newObj 和 obj 指向的是同一个内存地址，所以任何更改都会反映在另一个变量上。

类似地，在数组中进行浅拷贝也会产生相同的效果：

const arr = [1, 2, 3];
const newArr = arr;
newArr.push(4);
console.log(arr); // 输出 [1, 2, 3, 4]

实现浅拷贝

浅拷贝可以使用 Object.assign() 或者展开运算符 … 来实现；

/**
 * 浅拷贝
 *
 * @param {Object} target 目标对象
 * @param {Object} source 源对象
 * @return {Object} 返回目标对象
 */
function extend(target, source) {
    for (var key in source) {
        if (source.hasOwnProperty(key)) {
            var value = source[key];
            if (typeof value !== 'undefined') {
                target[key] = value;
            }
        }
    }
    return target;
}

什么是深拷贝

相比于浅拷贝，深拷贝会复制整个对象或数组，包括其所有的嵌套子对象和数组。这意味着新创建的对象与原始对象没有任何关联，改变其中一个对象不会影响另一个。

例如，如果我们使用 JavaScript 的内置函数 JSON.parse() 和 JSON.stringify() 来进行深拷贝：

const obj = { name: 'John', age: 30 };
const newObj = JSON.parse(JSON.stringify(obj));
newObj.age = 40;
console.log(obj.age); // 输出 30

在这个例子中，先使用 JSON.stringify() 将原始对象序列化为字符串，再使用 JSON.parse() 将其解析为新对象。由于字符串是基本类型的值，而非引用类型，因此 newObj 是一个全新的对象，与 obj 没有关系。

类似地，在数组中进行深拷贝也会产生相同的效果：

const arr = [1, [2, 3], [4, [5]]];
const newArr = JSON.parse(JSON.stringify(arr));
newArr[1][0] = 6;
console.log(arr[1][0]); // 输出 2

在这个例子中，通过深拷贝创建了一个新数组，并且修改新数组中嵌套数组的元素时，原始数组并不会受到影响。

实现深拷贝

深拷贝可以使用 JSON.parse(JSON.stringify(obj))、递归复制对象属性、第三方库如 lodash 的 deepClone 等方式来实现。但需注意的是，这些方法也有可能存在一些限制和缺陷，比如不能处理函数、循环引用等问题。

function deepCopy(obj) {
    var result, copy;
    if (obj.constructor === Object)
        result = {}; //判断传入的如果是对象，继续遍历
    else if (Array.isArray(obj))
        result = []; //判断传入的如果是数组，继续遍历
    else
        return obj; //如果是基本数据类型就直接返回
    for (var key in obj) {
        if(obj.hasOwnProperty(key)){
            copy = obj[key];
            if(copy===null){
                break;
            }
            if(typeof copy ==='undefined'){
                result[key]=undefined;
            }else if (getType(copy) == "Object"||getType(copy) == "Array")
                result[key] = deepCopy(copy); //递归方法
            else
                result[key] = copy; //基本数据类型则赋值给属性
        }
    }
    return result;
}

/**
* 深拷贝
* @param obj
* @param appeard
* @returns {*[]|any}
*/
deepCopy(obj, appeard = new Map()) {
    if (!(obj instanceof Object)) return obj; //如果是原始数据类型
    if (appeard.has(obj)) return appeard.get(obj); //如果已经出现过
    let result = Array.isArray(obj) ? [] : {};
    appeard.set(obj, result); //将新对象放入map
    //遍历所有属性进行递归拷贝
    [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)].forEach(key => (result[key] = this.deepCopy(obj[key], appeard)));
    return result;
}

到此这篇关于JavaScript中的浅拷贝和深拷贝原理与实现浅析的文章就介绍到这了,更多相关Javascript深拷贝与浅拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

纯js分页代码(简洁实用)
纯js写的分页代码且简洁实用哦！需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
JS回调函数深入理解
这篇文章主要介绍了JS回调函数,结合实例形式深入分析了js回调函数的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
2019-10-10
javascript实现划词标记划词搜索功能修正版
javascript实现划词标记划词搜索功能修正版...
2006-12-12
JS前端模块化原理与实现方法详解
这篇文章主要介绍了JS前端模块化原理与实现方法,结合实例形式分析了JS前端模块化具体概念、功能、原理、实现方法及相关操作注意事项,需要的朋友可以参考下
2020-03-03
javascript 闭包详解
闭包：是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部创建另外一个函数。在javascript中没有块级作用域，一般为了给某个函数申明一些只有该函数才能使用的局部变量时，我们就会用到闭包，我们来详细探讨下
2015-07-07
微信小程序实现上传多张图片、删除图片
这篇文章主要为大家详细介绍了微信小程序实现上传多张图片、删除图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
Chrome Form多次提交表单问题的解决方法
第一次提交可以，第二次提交就没有任何响应了。需要重新加载页面后才可以提交，而这个问题在Firefox,IE下没有出现。
2011-05-05
Javascript中call与apply的学习笔记
经常看到这俩哥们，看来看去都是讲他们的区别，一直没搞太清楚作用究竟是什么，现在记录下自己理解，有错的话希望指出！
2014-09-09
JS一维数组转化为三维数组方法
这篇文章主要给大家分享了JS一维数组转化为三维数组的方法，下面文章围绕JS数组转换的相关资料展开内容，对大家的学习有一定的参考价值，需要的小伙伴可以参考一下
2022-01-01
通俗解释JavaScript正则表达式快速记忆
正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。简单来说，就是按照某种规则去匹配符合条件的字符串
2017-08-08