深拷贝浅拷贝

浅拷贝

要通过浅拷贝去解决这个问题。

浅拷贝的方法有：

ES5 concat()

const a1 = [1, 2];
const a2 = a1.concat();

a2[0] = 2;
a1 
// [1, 2]

Object.assign

let a = {
    age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

ES6

通过扩展运算符 ...

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

但是浅拷贝只是解决了最外层的问题，多层就不适用（因为浅拷贝与原来不是一个空间，新空间里存放的多层对象或者数组，还是对原来存储空间的引用）

let a = {
    age: 1,
    jobs: {
        first: 'FE'
    }
}
let b = {...a}
a.jobs.first = 'native'
console.log(b.jobs.first) // 输出的是native 不再是原来的值

这时候就要用到深拷贝

深拷贝

JSON.parse(JSON.stringify(a))

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会自动忽略这个键值（就不能正常序列化）。
如果有循环引用会报错（JSON.stringify的时候就会报错）

Converting circular structure to JSON
--> starting at object with constructor 'Object'
--- property 'c' closes the circle
at JSON.stringify (<anonymous>)
at test.html:28

let obj = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  },
}
obj.c = obj.b
obj.e = obj.a
obj.b.c = obj.c
obj.b.d = obj.b
obj.b.e = obj.b.c
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj)

0 条评论