在JavaScript中拷贝对象

原文信息: 查看原文查看原文

COPYING OBJECTS IN JAVASCRIPT

- Victor

在JavaScript中,对象(Object)是一个引用类型,它是指向内存中的一个位置,如果只是简单地将同一个内存地址指向两个JavaScript变量,不能实现对象复制的功能,因为只要修改其中一个变量,就可以修改内存上该地址的值。

对象的拷贝分为浅拷贝深拷贝

浅拷贝。如果你的对象的属性都是值类型,可以使用拓展运算符Object.assign方法。需要知道的是,浅拷贝只是复制对象在内存中的位置,而不会产生新的内存地址。

var obj = { foo: "foo", bar: "bar" };

// 使用拓展运算符(...)
var copy = { ...obj }; // Object { foo: "foo", bar: "bar" }
// 使用Object.assign
var copy = Object.assign({}, obj); // Object { foo: "foo", bar: "bar" }

深拷贝。对象的深拷贝,最简单的方法就是使用JSON.stringify和JSON.parse,实现对象的中转转换。如果遇到更复杂的情况,需要使用HTML5的结构化复制。示例如下:

function deepClone(obj) {
  var copy;

  // Handle the 3 simple types, and null or undefined
  if (null == obj || "object" != typeof obj) return obj;

  // Handle Date
  if (obj instanceof Date) {
    copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }

  // Handle Array
  if (obj instanceof Array) {
    copy = [];
    for (var i = 0, len = obj.length; i < len; i++) {
        copy[i] = deepClone(obj[i]);
    }
    return copy;
  }

  // Handle Function
  if (obj instanceof Function) {
    copy = function() {
      return obj.apply(this, arguments);
    }
    return copy;
  }

  // Handle Object
  if (obj instanceof Object) {
    copy = {};
    for (var attr in obj) {
      if (obj.hasOwnProperty(attr))
        copy[attr] = deepClone(obj[attr]);
    }
    return copy;
  }

  throw new Error("Unable to copy obj as type isn't supported " + obj.constructor.name);
}

希望这篇文字能给你启发,让你更好地理解JavaScript中的对象拷贝的方法。

分享于 2018-11-03

访问量 1323

预览图片