js浅拷贝与深拷贝

• 浅拷贝是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以其中一个对象改变了这个地址，就会影响到另一个对象。
• 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

创建一个对象栗子

var obj = {
   heroName: '百里守约',
   heroSkills:['瞄准', ['静谧之眼', '狂风之息', '逃脱']]
}

复制

var copyObj = obj
copyObj.heroName = '百里玄策'
copyObj.heroSkills[0] = '狂热序章'
        
console.log(obj)  console.log(copyObj )

copyObj打印是

image.png

浅拷贝

function shallowCopy(obj){
         let target = {}
         for (const i in obj) {
              if (obj.hasOwnProperty.call(obj, i)) {
                  target[i] = obj[i];
         }
    }
    return target
}
var copyObj = shallowCopy(obj)
copyObj.heroName = '百里玄策'
copyObj.heroSkills[0] = '狂热序章'

console.log('obj', obj)  //打印是
console.log('copyObj', copyObj )

shallowCopy打印

image.png

深拷贝

       function deepCopy(obj){
            let deepCloneObj = {}
            if(typeof obj !== 'object') return obj 
            for (const i in obj) {
                if (obj.hasOwnProperty(i)) {
                    deepCloneObj[i] = deepCopy(obj[i]);
                }
            }
            return deepCloneObj
        }
        var copyObj = deepCopy(obj)
        copyObj.heroName = '百里玄策'
        copyObj.heroSkills[0] = '狂热序章'

        console.log('obj', obj)  //打印是
        console.log('copyObj', copyObj )

deepCopy打印

image.png

深拷贝 更多类型判断

        var obj = {
            heroName: '百里守约',
            heroSkills:['瞄准', ['静谧之眼', '狂风之息', '逃脱']],
            date: new Date(),
            reg: '\p+\/'
        }

        function deepCopy(obj){
            let deepCloneObj = {}
          
            if(typeof obj !== 'object') return obj 
            if(obj === null) return obj
            if(obj instanceof Date) return new Date()
            if(obj instanceof RegExp) return new RegExp()

            for (const i in obj) {
                if (obj.hasOwnProperty(i)) {
                    deepCloneObj[i] = deepCopy(obj[i]);
                }
            }
            return deepCloneObj
        }
        var copyObj = deepCopy(obj)
        copyObj.heroName = '百里玄策'
        copyObj.heroSkills[0] = '狂热序章'

        console.log('obj', obj)  //打印是
        console.log('copyObj', copyObj )

image.png

浅拷贝有哪些

1.函数库lodash的_.clone方法

const _clone = require('lodash.clone')

2.Object.assign()

const original = {
  name: 'Fiesta',
  car: {
    color: 'blue',
  },
}
const copied = Object.assign({}, original)

original.name = 'Focus'
original.car.color = 'yellow'

copied.name //Fiesta
copied.car.color //yellow

3.展开运算符...
该价差运营商是一个ES6 / ES2015的特性，能够进行浅克隆，相当于什么非常方便地Object.assign()做。

const copied = { ...original }

4.Array.prototype.concat()

5.Array.prototype.slice()

深拷贝有哪些

1.JSON.parse(JSON.stringify())

let obj = {
      a: new Date(),
      b: NaN,
      c: new Function(),
      d: undefined,
      e: function () {
          return 1
      },
      f: Number,
      g: false,
      h: Infinity,
}    
 console.log(JSON.parse(JSON.stringify(obj))) //{a: "2020-12-02T03:06:19.959Z", b: null, g: false, h: null}

打印（弊端 ）仅当您没有任何内部对象和函数，而只有值时，这才起作用。

image.png

2.函数库lodash的_.cloneDeep方法

const clonedeep = require('lodash.clonedeep')

参考文献

Lodash中文文档
js浅拷贝和深拷贝
掘金浅拷贝与深拷贝