更清晰的认识对象——深拷贝与浅拷贝

对象在引用的时候引用的是对象的地址，所以导致如果修改其中一个对象，就会对其他引用这个地址的对象进行修改，这种结果并不是我们想要的，这个时候我们就要用到深拷贝和浅拷贝去解决这个问题了。

var a = {
  name: 'test'
};
var b = a;
a.name = 'test1';
console.log(b); // {name: 'test1'}
复制代码

浅拷贝

• Object.assign

Object.assign 只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以并不是深拷贝。

var a = {
  name: 'test'
};
var b = Object.assign({}, a);
a.name = 'test1';
console.log(b); // {name: 'test'}
复制代码

• ...扩展运算符

我们可以通过扩展运算符实现浅拷贝。

var a = {
  name: 'test'
};
var b = { ...a };
a.name = 'test1';
console.log(b); // {name: 'test'}
复制代码

深拷贝

最简单的深拷贝可以通过 JSON.parse(JSON.stringify(obj)) 实现。

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
};
let b = JSON.parse(JSON.stringify(a));
a.jobs.first = 'native';
console.log(b.jobs.first); // FE
复制代码

但是如果对象中包含 undefined，Symbol，序列化函数，循环引用对象这几种情况的话，这个方法就不起作用了。

let a = {
  age: undefined,
  sex: Symbol('male'),
  jobs: function() {},
  name: 'yck'
};
let b = JSON.parse(JSON.stringify(a));
console.log(b); // {name: "yck"}
复制代码

深拷贝我们还可以使用 MessageChannel，这个方法可以处理 undefined 和循环引用对象。

function structuralClone(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}

var obj = {
  a: 1,
  b: {
    c: 2
  }
};

obj.b.d = obj.b;

// 注意该方法是异步的
// 可以处理 undefined 和循环引用对象
const test = async () => {
  const clone = await structuralClone(obj);
  console.log(clone);
};
test();
复制代码

最简单的我们还可以使用lodash 的深拷贝方法。

如果想自己实现一个深拷贝，其实需要考虑多个边界情况，比较复杂，参考网上的内容，实现一个简易版的深拷贝。

function deepClone(obj) {
  function isObject(o) {
    return (typeof o === 'object' || typeof o === 'function') && o !== null;
  }

  if (!isObject(obj)) {
    throw new Error('非对象');
  }

  let isArray = Array.isArray(obj);
  let newObj = isArray ? [...obj] : { ...obj };
  Reflect.ownKeys(newObj).forEach(key => {
    newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key];
  });

  return newObj;
}

let obj = {
  a: [1, 2, 3],
  b: {
    c: 2,
    d: 3
  }
};
let newObj = deepClone(obj);
newObj.b.c = 1;
console.log(obj.b.c); // 2
复制代码