js实现对象数组的浅拷贝和深拷贝

在使用vue + iview开发过程中，因为一些场景需要，总是会遇到数组拷贝的问题，尤其是在Table组件嵌套Input的情境下。

需求：可以修改表格某一行的内容，点击确定进行保存。

问题情景：当输入框有值时修改输入框会出现卡顿。
原因分析：这一般都是由于数组没有进行深拷贝，导致页面重新渲染，所以输入一个值，光标就跳出页面了。

概念

浅拷贝：只拷贝一层，深层次的对象级别只拷贝引用。
深拷贝：拷贝多层，每一级别的数据都会被拷贝出来。

浅拷贝的实现方式

方法一：通用循环

function shallowCopy(obj) {
  if (typeof obj !== 'object') return;

  const newObj = obj instanceof Array ? [] : {};

  for(let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = obj[key];
    }
  }

  return newObj;
}

方法二：Object.assign

const newObj = Object.assign({}, oldObj);

方法三：Array.slice

const newArray = oldArray.slice();

方法四：Array.concat

const newArray = oldArray.concat();

方法五：es6

const { ...newObj } = oldObj;
const [ ...newArray ] = oldArray;

深拷贝的实现方式

方法一：通用循环

function deepCopy(obj) {
  if (typeof obj !== 'object') return;

  const newObj = obj instanceof Array ? [] : {};

  for(let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = typeof obj === 'object' ? deepCopy(obj[key]) : obj[key];
    }
  }

  return newObj;
}

方法二：JSON.stringify,JSON.parse

const newObj = JSON.parse(JSON.stringify(oldObj));