js——关于对象的深浅拷贝(浅拷贝Object.assign和深拷贝_.cloneDeep(obj)

        1.对象的拷贝分为两种,第一种为浅拷贝

        

let str = '张三'
let str1 = str
str1 = '李四'
console.log(str1, str)

let obj = {
  name: '张三'
}
let obj1 = obj
obj1.name = obj.name
console.log(obj.name, obj1.name)
obj1.name = '李四'
console.log(obj.name, obj1.name)

这时候我们发现了个问题，当我们修改obj1对象里面的内容的时候obj里面的内容也随之改变了

造成这个问题的原因在现代js教程中有所解释

就是说,如果上方那样复制并不是创建了个新的对象，而是两个对象共同引入一个地址，所以两个对象才可以修改一个值

很显然，我们并不想要这种效果,于是乎我们可以通过几种方法来解决这个问题

方法一:

let obj = {
  name: '张三'
}
let obj1 = {}
obj1.name = obj.name
console.log(obj.name, obj1.name)
obj1.name = '李四'
console.log(obj.name, obj1.name)

这里我们直接将obj1赋值为空,这个时候obj1相当于声明了一个新的地址,然后再把obj中的name赋值给obj1就不会造成上面的bug了 

扫描二维码关注公众号，回复： 17475339 查看本文章

方法二:

let obj = {
  name: '张三'
}
let obj1 = JSON.parse(JSON.stringify(obj))
obj1.name = obj.name
console.log(obj.name, obj1.name)
obj1.name = '李四'
console.log(obj.name, obj1.name)

现在介绍以下Object.assgin方法

此方法用于对象过多并且想合并到一起去成为一个对象的时候使用

let obj = {
  name: '张三'
}
let obj2 = {
  age: 2
}
let obj1 = {}
Object.assign(obj1, obj, obj2)
console.log(obj1)

这样就将obj和obj2合并到obj1中了

接下来介绍深拷贝

let obj = {
  name: '张三',
  size: {
    name: '李四'
  }
}

let obj1 = {}
obj1.size = obj.size
obj1.size.name = '张三'
console.log(obj, obj1)

我们发现即使我们令定义obj1为空值然后再给他赋值obj.size，之后再去改变obj1.size的时候obj.size也会随之改变。这个时候我们就要用到深拷贝了

方法一: _.cloneDeep(obj)

需要引用lodash.min.js

方法二:使用JSON进行深拷贝