JS Object Deep Copy & 深度拷贝问题

js-object-deep-copyy.md

JS Object Deep Copy & 深度拷贝问题

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

针对深度拷贝，需要使用其他方法 JSON.parse(JSON.stringify(obj));，因为 Object.assign() 拷贝的是属性值。 假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。

function test() {
  let a = { b: {c:4} , d: { e: {f:1}} };

  let g = Object.assign({},a);

  let h = JSON.parse(JSON.stringify(a));

  console.log(g.d); // { e: { f: 1 } }
  g.d.e = 32;

  console.log('g.d.e set to 32.') 
// g.d.e set to 32.
  console.log(g); // { b: { c: 4 }, d: { e: 32 } }
  console.log(a); // { b: { c: 4 }, d: { e: 32 } }

  console.log(h); 
// { b: { c: 4 }, d: { e: { f: 1 } } }


  h.d.e = 54;
  console.log('h.d.e set to 54.') ;
// h.d.e set to 54.

  console.log(g); // { b: { c: 4 }, d: { e: 32 } }
  console.log(a); // { b: { c: 4 }, d: { e: 32 } }

  console.log(h); 
// { b: { c: 4 }, d: { e: 54 } }
}
test();

https://gist.github.com/xgqfrms-GitHub/0bf82ff06037a0d1776c9f30033cbfd1

jQuery

https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript

I want to note that the .clone() method in jQuery only clones DOM elements.

https://api.jquery.com/jQuery.extend/

将两个或多个对象的内容合并到第一个对象中。

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

https://api.jquery.com/jquery.extend/

https://api.jquery.com/clone/

Object.prototype.hasOwnProperty()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

hasOwnProperty() 方法会返回一个布尔值，指示对象是否具有指定的属性作为自身（不继承）属性。

https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object

http://www.mavenspun.com/javascript/learn-programming/how-to-deep-copy-clone-javascript-object-or-complex-data-structure.htm

var data_copy = JSON.parse(JSON.stringify( original_data ));

http://www.mavenspun.com/javascript/learn-programming/how-to-build-graph-using-html5-canvas-and-json.htm

http://www.mavenspun.com/javascript/learn-programming/how-to-create-javascript-vector-hexagon-with-canvas-html5.htm

http://www.mavenspun.com/javascript/learn-programming/how-to-create-javascript-vector-hexagon.htm

http://blog.soulserv.net/understanding-object-cloning-in-javascript-part-i/

https://github.com/cronvel

http://www.zsoltnagy.eu/cloning-objects-in-javascript/

http://www.zsoltnagy.eu/es6-in-practice

https://coderwall.com/p/-c_zlg/effective-deep-copy-of-javascript-objects

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create

https://zhuanlan.zhihu.com/p/27242519

http://www.cnblogs.com/xgqfrms/p/6942570.html