js深拷贝与浅拷贝

最近在项目中碰到一个需求，如下图，点击复制的时候，把当前整行复制

 一看觉得很简单，当前数组直接push选择复制的那一项item就好了。后来发现当我更下面那个时间的时候，上面也会跟着改变，后来想起来这跟可能只是浅拷贝，要互不影响的话应该深拷贝。

浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝

深拷贝是将对象及值复制过来，两个对象修改其中任意的值另一个值不会改变，这就是深拷贝

 

如何实现深拷贝呢？有这几种方法

1，首推的方法简单有效，JSON.stringfy()和JSON.parse()即可搞定。但是这种简单粗暴的方法有其局限性。当值为undefined、function、symbol 会在转换过程中被忽略。。。所以，对象值有这三种的话用这种方法会导致属性丢失。

var syb = Symbol('obj');
var person = {
   name :'tino',
   say: function(){
      console.log('hi');
   },
   ok: syb,
   un: undefined
}
var copy = JSON.parse(JSON.stringify(person))
// copy
// {name: "tino"}

2，所以如果对象值中有3种属性的话就要采用别的方法了，自己写个函数

function deepCopy(obj) {
      var result = Array.isArray(obj) ? [] : {};
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === 'object' && obj[key]!==null) {
            result[key] = deepCopy(obj[key]);   //递归复制
          } else {
            result[key] = obj[key];
          }
        }
      }
      return result;
    }

3，还有一些Object.assgin(), 数组的slice()这些，ES6的...操作符等这些只深复制了基本类型数据类型，不是真正意义的深复制，当然，如果要复制的对象或者数组都是简单数据类型，那就大胆用吧