JavaScript里的深浅拷贝

作者: _于易 | 来源:发表于2017-12-11 16:22 被阅读37次

由于js里的数据类型分为简单类型和引用类型,所以在引用类型的复制问题上出现了深浅复制的问题。深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。

浅拷贝的实现

let obj = { a:1, arr: [2,3] };
let shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  let dst = {};
  for (let prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

深拷贝的实现

深复制不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。
实现深拷贝有两个思路,第一是利用递归,第二是利用JSON.stringify()方法。由于JSON内合法的只有字符串,数字,布尔值,null,对象和数组类型的数据,需要注意的是下面几点:

  • 如果原始对象中,有一个成员的值是undefined、函数或 XML 对象,这个成员会被过滤
  • 如果数组的成员是undefined、函数或 XML 对象,则这些值被转成null
  • 正则会被转成空对象

利用递归:

function deepCopy(oldObj) {
    var newObj = {};
    for(let key in oldObj) {
        if(typeof oldObj[key] === 'object') {
            newObj[key] = deepCopy(oldObj[key]);
        }else{
            newObj[key] = oldObj[key];
        }
    }
    return newObj;
}

利用JSON.parse:

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

堪称黑科技~~

相关文章

  • JavaScript里的深浅拷贝

    由于js里的数据类型分为简单类型和引用类型,所以在引用类型的复制问题上出现了深浅复制的问题。深复制和浅复制只针对像...

  • javascript深浅拷贝

    Javascript有六种基本数据类型(也就是简单数据类型),它们分别是:Undefined,Null,Boole...

  • javascript深浅拷贝

    underscore 的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有...

  • JavaScript深浅拷贝

    简单讲呢,深浅拷贝,都是进行复制,那么区别主要在于复制出来的新对象和原来的对象是否会互相影响,改一个,另一个也会变...

  • Javascript深浅拷贝

    浅拷贝 1.基本数据类型 是存在栈中的,所以=赋值,都会创建一个新的空间,例如 变量b有自己独立的空间 2.对象数...

  • JavaScript深浅拷贝

    原文链接 http://blog.poetries.top/2018/12/21/js-deep-copy/ 关注...

  • Javascript深浅拷贝

    拷贝 复制与拷贝 复制:将一个对象a赋值给另一个变量b,这个只是存储了对象a的引用地址,是属于同一个对象 克隆:创...

  • JavaScript深浅拷贝

    一般来说,我们拷贝数据的时候:如果是基本数据类型,则会生成新的数据,修改拷贝后的数据不会影响原有数据。如果是对象/...

  • JavaScript 深浅拷贝

    深拷贝: 深拷贝即创建新的内存地址保存值(互不影响)浅拷贝: 共用同一内存地址,你改变我也跟着变 总结:slice...

  • javascript深浅拷贝讲解

    最近写一个项目用到了深浅拷贝,为了更深入的了解,又查了一些资料,找到了司徒正美大神的一个讲解,非常好,这里分享一下...

网友评论

    本文标题:JavaScript里的深浅拷贝

    本文链接:https://www.haomeiwen.com/subject/mcgiixtx.html