JS对象浅拷贝与深拷贝方法

JS 对象浅拷贝是将对象的属性和值复制出来给另一个对象,可能没有将对象的所有层级的属性复制,新对象的属性的引用地址可能与原对象相同。而深拷贝就是将对象完全复制一份,复制出来的对象与原对象具有相同层级的属性和值,并且新对象的属性拥有独立的引用地址。

假设声明以下对象:

var obj = {
  a: 1,
  b: 'abc',
  c: [1, 2, 3],
  d: {
    e: 4,
    f: 'efg',
    g: [4, 5, 6]
  }
}

1.通过循环遍历拷贝

var objCopy = {};

for (var k in obj) {
  objCopy[k] = obj[k];
}

2.使用 Object.keys 遍历拷贝

var objCopy = {};

Object.keys(obj).forEach(function(key) {
  objCopy[key] = obj[key];
});

3、使用 ES6 Object.assign() 方法拷贝

var objCopy = Object.assign({}, obj);

// 修改新对象的属性值
objCopy.a = 2;
objCopy.c.push(4);
objCopy.d.e = 5;

console.log(objCopy.a);
// > 2
console.log(obj.a);
// > 2
console.log(objCopy.c);
// > [1, 2, 3, 4]
console.log(obj.c);
// > [1, 2, 3, 4]
console.log(objCopy.d.e);
// > 5
console.log(obj.d.e);
// > 5

由上面的结果可见,通过 Object.assign() 方法只是拷贝了对象的第一层属性,并且对于新对象与原对象的属性的引用地址相同。

4.使用 JSON.parse(JSON.stringfy()) 拷贝

var objCopy = JSON.parse(JSON.stringfy(obj));

5.深拷贝函数

function deepCopy(obj) {
  var k, k2, i, val;
  var result = Array.isArray(obj) ? [] : {};

  for (k in obj) {
    val = obj[k];

    if (Array.isArray(val)) {
      for (i = 0; i < val.length; i++) {
        result[k] = deepCopy(val[i]);
      }
    }
    else if (Object.prototype.toString.call(val) === '[object Object]') {
      for (k2 in val) {
        result[k] = deepCopy(val[k2]);
      }
    }
    else {
      result[k] = val;
    }
  }

  return result;
}
此条目发表在JavaScript分类目录,贴了, , , 标签。将固定链接加入收藏夹。