JavaScript深拷贝与浅拷贝实现详解

 更新时间:2022年11月05日 08:40:58   作者:欢莱  
深拷贝和浅拷贝是面试中经常出现的,主要考察对基本类型和引用类型的理解深度,这篇文章主要给大家介绍了关于js深拷贝和浅拷贝的相关资料,需要的朋友可以参考下

对于基本类型数据

可以说都是深拷贝。

对于引用类型数据

对于引用类型数据,浅拷贝 后,因为浅拷贝只拷贝了引用地址,所以两个对象均使用同一个引用地址,此引用地址指向同一个内存即数据值。对其中任何一个对象操作会改变引用地址对应的数据的值。

而 深拷贝 将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

问:解构赋值是深拷贝还是浅拷贝?

若数组是一维数组,则可以看做是深拷贝。

        let arr = [1, 2, 3]
        let copyArr = [...arr]
        copyArr.push(4)
        console.log(arr, copyArr) 

若数组是多维数组,则是浅拷贝。

        let arr2 = [[1, 2, 3], [9, 0, 6]]
        let copyArr2 = [...arr2]
        copyArr2[0].push(77)
        console.log(arr2, copyArr2)

注: 简单赋值只是复制了引用地址:

const a1 = [1, 2];
const a1Copy = a1;
a1Copy[0] = 9;
console.log(a1)  // [9, 2]
console.log(a1Copy) // [9, 2]

若不用 扩展运算符拷贝, ES5 中用变通方法来拷贝数组

const a1 = [1, 2];
const a1Copy = a1.concat();
a1Copy[0] = 9;
a1 // [1, 2]

实现深拷贝

简单版

在不使用第三方库的情况下,想要深拷贝一个对象

const newObj = JSON.parse(JSON.stringify(oldObj))

局限性:

  • 无法实现对RegExp、Date、Set、Map等特殊对象的克隆
  • 无法拷贝函数
  • 会抛弃对象的constructor,所有的构造函数会指向Object
  • 对象有循环引用,会报错

够用版

使用递归,拷贝数组或对象。

function deepClone(source) {
    // 定义结果对象或数组
    const targetObj = source.constructor === Array ? [] : {}
    // 遍历key
    for (let keys in source) {
        // 如果key是对象的自有属性
        // hasOwnProperty()查找一个对象是否有某个属性,但是不会去查找它的原型链。
        if (source.hasOwnProperty(keys)) {
            // 如果是引用类型
            if (source[keys] && typeof source[keys] === 'object') {
                // 递归
                targetObj[keys] = deepClone(source[keys])
            } else {
                // 如果是基本类型
                targetObj[keys] = source[keys]
            }
        }
    }
    return targetObj
}
  • 关于其他情况,如解决循环引用、拷贝特殊对象、拷贝函数的情况不常见,本文就不写解决这些问题的代码啦。
  • 在实际开发,克隆数据还是使用第三方库更好。

新发现个原生深拷贝的方法,

structuredClone

全局的 structuredClone() 方法使用结构化克隆算法将给定的值进行深拷贝 。

适用 H5;

Error 以及 Function 对象是不能被结构化克隆算法复制等等缺点。

详情看 MDN:传送门

let obj = {
  a: [1, 2],
  b: "eee",
  c: 3,
};
let cloneObj = structuredClone(obj);
cloneObj.a[0] = 10;
console.log(cloneObj.a[0]); // 10
console.log(obj.a[0]);      // 1

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

相关文章

  • 微信小程序使用ECharts的示例详解

    微信小程序使用ECharts的示例详解

    echarts-for-weixin是ECharts官方维护的一个开源项目,提供了一个微信小程序组件,可以通过这个组件在微信小程序中使用 ECharts 绘制图表。本文将通过示例详解微信小程序使用ECharts的方法,感兴趣的可以了解一下
    2022-06-06
  • 原生JS实现呼吸轮播图

    原生JS实现呼吸轮播图

    这篇文章主要为大家详细介绍了原生JS实现呼吸轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript实现的石头剪刀布游戏源码分享

    JavaScript实现的石头剪刀布游戏源码分享

    这篇文章主要介绍了JavaScript实现的石头剪刀布游戏源码分享,挺好玩的小游戏,关键在一些算法上,需要的朋友可以参考下
    2014-08-08
  • webpack打包中path.resolve(__dirname, 'dist')的含义解析

    webpack打包中path.resolve(__dirname, 'dist')的含义解

    这篇文章主要介绍了webpack打包中path.resolve(__dirname, 'dist')的含义解析,path:path.resolve(__dirname, 'dist')就是在打包之后的文件夹上拼接了一个文件夹,在打包时,直接生成,本文给大家讲解的非常详细,需要的朋友可以参考下
    2023-05-05
  • 导航跟随滚动条置顶移动示例代码

    导航跟随滚动条置顶移动示例代码

    滚动条滚动时如何让导航置顶移动,这种效果已经在很多网看到了,所以本文也来实现一个,感兴趣的朋友可以学习下
    2013-09-09
  • javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解

    这篇文章主要介绍了javascript 中事件冒泡和事件捕获机制的详解的相关资料,网上的相关资料有很多,但是讲的不是多清楚,通过本文希望能让大家理解掌握,需要的朋友可以参考下
    2017-09-09
  • javascript遍历json对象的key和任意js对象属性实例

    javascript遍历json对象的key和任意js对象属性实例

    下面小编就为大家带来一篇javascript遍历json对象的key和任意js对象属性实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • from 表单提交返回值用post或者是get方法实现

    from 表单提交返回值用post或者是get方法实现

    from 表单提交的返回值可以用jquery的post或者是get方法去实现,具体如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • element-ui 图片压缩上传功能实现

    element-ui 图片压缩上传功能实现

    这篇文章主要介绍了element-ui 图片压缩上传功能实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10
  • JS实现移动端上下滑动一次一屏

    JS实现移动端上下滑动一次一屏

    这篇文章主要为大家详细介绍了JS实现移动端上下滑动一次一屏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06

最新评论