前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js深拷贝与浅拷贝

js深拷贝与浅拷贝

作者头像
kiki.
发布2022-09-29 08:24:10
1.3K0
发布2022-09-29 08:24:10
举报
文章被收录于专栏:web全栈之路

1.区别:

  • 深拷贝和浅拷贝的使用场景是在复杂对象里,即对象的属性还是对象;
  • 浅拷贝是指只复制一层对象,当对象的属性是引用类型时,实质复制的是其引用,当引用指向的值改变时也会跟着变化;深拷贝是指复制对象的所有层级。

2.深拷贝实现

Json序列化与反序列化:

代码语言:javascript
复制
function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}

 缺点:

  • 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
  • undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。
  • 对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误。
  • 所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数中强制指定包含了它们。
  • 不可枚举的属性会被忽略
  • 对于引用类型:object,array,date,regexp,function,err,只能深拷贝对象和数组,对于其他种类的对象,会失真。这种方法比较适合平常开发中使用,因为通常不需要考虑对象和数组之外的类型。

最佳实现:(类似lodash的cloneDeep)

代码语言:javascript
复制
function isArray(val) {
    return Object.prototype.toString.call(val) === '[object Array]';
}
function isObject(val) {
    return typeof val === 'object' && val !== null;
}

function deepCopy(obj2) {
    var obj = isArray(obj2) ? [] : {};
    for (var property in obj2) {
        if (isObject(obj2[property])) {
            obj[property] = deepCopy(obj2[property]);
        } else {
            obj[property] = obj2[property];
        }
    }
    return obj;
}

3.浅拷贝实现

  • Object.assign() 
  • Underscore —— _.clone()
  • lodash —— _.clone()
  • 数组中concat和slice方法
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档