Javascript 中的對(duì)象拷貝

lieeps 發(fā)布于2019-08-26 12:25 / 1160人閱讀

摘要：原文在這篇文章中我們將會(huì)討論中對(duì)象拷貝的多種方式。因此，根據(jù)你的用法需要特別注意的對(duì)象拷貝。在擁有權(quán)限的情況下，通知立即關(guān)閉。在中深拷貝不幸的是，結(jié)構(gòu)化拷貝算法目前僅適用于基于瀏覽器的應(yīng)用。

原文：COPYING OBJECTS IN JAVASCRIPT
在這篇文章中我們將會(huì)討論 Javascript 中對(duì)象拷貝的多種方式。包括深拷貝和淺拷貝。
開(kāi)始之前，先談一些基礎(chǔ)知識(shí)： Javascript 中的對(duì)象只是對(duì)內(nèi)存中某個(gè)地址的引用。這些引用是可變的，即它們可以重新分配。因此，簡(jiǎn)單制作一個(gè)引用的副本只會(huì)導(dǎo)致2個(gè)引用指向內(nèi)存中相同的地址：

var foo = {
    a : "abc"
}
console.log(foo.a); // abc

var bar = foo;
console.log(bar.a); // abc

foo.a = "yo foo";
console.log(foo.a); // yo foo
console.log(bar.a); // yo foo

bar.a = "whatup bar?";
console.log(foo.a); // whatup bar?
console.log(bar.a); // whatup bar?

在上面的例子中可以看到，不管是foo還是bar都反映了它們對(duì)象上的變化。因此，根據(jù)你的用法需要特別注意Javascript的對(duì)象拷貝。

淺拷貝

如果你的對(duì)象只有值類型的屬性，則可以用拓展語(yǔ)法或者

Object.assign(...)

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

var copy = { ...obj }; // Object { foo: "foo", bar: "bar" }

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

var copy = Object.assign({}, obj); // Object { foo: "foo", bar: "bar" }

注意，上述兩種方法都可以將屬性值從多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象：

var obj1 = { foo: "foo" };
var obj2 = { bar: "bar" };

var copySpread = { ...obj1, ...obj2 }; // Object { foo: "foo", bar: "bar" }
var copyAssign = Object.assign({}, obj1, obj2); // Object { foo: "foo", bar: "bar" }

上述方法的問(wèn)題在于對(duì)于對(duì)象的屬性是對(duì)象的對(duì)象，只復(fù)制了引用地址，即它相當(dāng)于執(zhí)行 var bar = foo，與第一個(gè)代碼示例一樣：

var foo = { a: 0 , b: { c: 0 } };
var copy = { ...foo };

copy.a = 1;
copy.b.c = 2;

console.dir(foo); // { a: 0, b: { c: 2 } }
console.dir(copy); // { a: 1, b: { c: 2 } }

深拷貝（警告）

對(duì)于更加復(fù)雜的情況，可以使用較新的被稱為“結(jié)構(gòu)化拷貝”的HTML5拷貝算法。不幸的是，它仍局限于某些內(nèi)置類型，但它支持的類型比 JSON.parse 多得多：Date, RegExp, Map, Set, Blob, FileList, ImageData, 稀疏和類型化的Array。它還保留了拷貝數(shù)據(jù)中的引用，允許它支持不能與上述序列化方法一起使用的循環(huán)和遞歸結(jié)構(gòu)。
目前沒(méi)有直接的方法來(lái)調(diào)用結(jié)構(gòu)化拷貝算法，但是有一些較新的瀏覽器功能在引擎幫助下使用了這個(gè)算法。因此有幾個(gè)可以用來(lái)深拷貝的解決方法。
通過(guò) MessageChannels：它的想法是利用通信功能使用的序列化算法。由于這個(gè)功能是基于事件的，因此生成的拷貝也是異步操作。

class StructuredCloner {
  constructor() {
    this.pendingClones_ = new Map();
    this.nextKey_ = 0;

    const channel = new MessageChannel();
    this.inPort_ = channel.port1;
    this.outPort_ = channel.port2;

    this.outPort_.onmessage = ({data: {key, value}}) => {
      const resolve = this.pendingClones_.get(key);
      resolve(value);
      this.pendingClones_.delete(key);
    };
    this.outPort_.start();
  }

  cloneAsync(value) {
    return new Promise(resolve => {
      const key = this.nextKey_++;
      this.pendingClones_.set(key, resolve);
      this.inPort_.postMessage({key, value});
    });
  }
}

const structuredCloneAsync = window.structuredCloneAsync =
    StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner);


const main = async () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = await structuredCloneAsync(original);

  // different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));

  console.log("Assertions complete.");
};

main();

通過(guò) history API： history.pushState() 和 history.replaceState() 都創(chuàng)建了它們第一個(gè)參數(shù)的結(jié)構(gòu)化拷貝！注意當(dāng)這個(gè)方法是異步的時(shí)候，操縱瀏覽器歷史記錄不再是一個(gè)快速操作，反復(fù)調(diào)用此方法可能會(huì)導(dǎo)致瀏覽器無(wú)響應(yīng)。

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

通過(guò) notification API：在創(chuàng)建新通知時(shí)，構(gòu)造函數(shù)會(huì)創(chuàng)建它關(guān)聯(lián)數(shù)據(jù)的結(jié)構(gòu)化拷貝。注意它還會(huì)嘗試向用戶顯示瀏覽器通知，但是除非應(yīng)用程序已經(jīng)請(qǐng)求到了顯示通知的權(quán)限，否則這個(gè)操作將會(huì)失敗。在擁有權(quán)限的情況下，通知立即關(guān)閉。

const structuredClone = obj => {
  const n = new Notification("", {data: obj, silent: true});
  n.onshow = n.close.bind(n);
  return n.data;
};

在 NODE.JS 中深拷貝

不幸的是，結(jié)構(gòu)化拷貝算法目前僅適用于基于瀏覽器的應(yīng)用。對(duì)于服務(wù)端，可以使用 lodash 的 cloneDeep 方法，該方法也是基于結(jié)構(gòu)化拷貝方法。

結(jié)論

總而言之，在Javascript中拷貝對(duì)象的最佳算法很大程度上取決于你要復(fù)制的對(duì)象的內(nèi)容和類型。雖然 lodash 是最安全的通用深拷貝方法，但如果你自己動(dòng)手，可能會(huì)獲得更高效的實(shí)現(xiàn)，以下是一個(gè)適用于日期的簡(jiǎn)單深拷貝的例子：

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);
}

就個(gè)人而言，我期待能夠在任何地方使用結(jié)構(gòu)化拷貝，最后把這個(gè)問(wèn)題放一邊，快樂(lè)的拷貝:)
注：若有問(wèn)題，請(qǐng)聯(lián)系我修改=。=