JS基础拾遗 - 实现拷贝和深拷贝

对象的浅拷贝

Object.assign(target, source)

Object.assign() 是 ES6 新增的方法，它把可枚举属性的值从一个/多个源对象复制到目标对象，然后返回目标对象。
这个描述需要注意：源对象可能不止一个，且对源对象不产生任何副作用。

Demo1：

Object.assign() 执行的是浅拷贝，对于引用类型的属性，仅仅是复制它的引用值。

"use strict";
var obj = {
  a: "myname",
  b: 13,
  c: {
    name: "none"
  }
}
var target = Object.assign({}, obj);

// 验证拷贝是否有效
delete target.a;
console.log(target); // { b: 13, c: { name: 'none' } }
console.log(obj); // { a: 'myname', b: 13, c: { name: 'none' } }
// 验证浅拷贝
console.log(obj.c === target.c);  // true

Demo 2：

传入的target目标对象，和返回的目标对象是同一个对象。

var target = {};
var es = Object.assign(target, obj);
console.log(es === target);  // true

Demo 3:

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。

后面的源对象的属性将类似地覆盖前面的源对象的属性，且无论如何都不会对源对象产生影响。

"use strict";
var obj = {
  a: "myname",
  b: 13,
  c: {
    name: "none"
  }
}
var obj2 = {
  a: "hisname"
}
var obj3 = {
  c: "hername"
}
console.log(Object.assign(obj2, obj, obj3)); // { a: 'myname', b: 13, c: 'hername' }
console.log(obj); // { a: 'myname', b: 13, c: { name: 'none' } }
console.log(obj3); // { c: 'hername' }

其他要点：

1. 继承而来的属性是不能被拷贝的；
2. Symbol类型的属性和String类型的属性都会被拷贝。

Object.create() ?

私以为这个函数还是主要用于原型继承，其第二个参数接受一个描述符对象。

数组的浅拷贝

• Array.prototype.concat()
• Array.prototype.slice()
  以上方法，直接调用即可，不需要传参。

返回数组的浅拷贝：
基本数据类型得到一份拷贝，
引用数据类型只拷贝引用值（栈内存，指针）

深拷贝

JSON.parse(JSON.stringify())

简单有效的方法，对数组和对象均有效，但对于RegExp对象、Function都是无效的。
JSON.stringify()第一个参数接收一个数组或对象，将其解析成JSON字符串，然后再由
JSON.parse()基于该JSON字符串生成新的对象。

var obj = {
  a: "name",
  b: {
    c: "name"
  },
}
var obj2 = JSON.parse(JSON.stringify(obj));

递归的方法

该方法也仅对数组和对象有效。
示例：

function deepClone(obj) {
  let copy = Array.isArray(obj) ? [] : {};
  for(let key in obj) {
    copy[key] = typeof obj[key] === "object" ? deepClone(obj[key]) : obj[key];
  }
  return copy;
}