Web 前端开发 让前端飞Web前端之路

JavaScript里的深浅拷贝

2017-12-11  本文已影响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,对象和数组类型的数据,需要注意的是下面几点:

利用递归:

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)

堪称黑科技~~

上一篇 下一篇

猜你喜欢

热点阅读