随笔 20210311

js 数组/对象赋值后，改变现有数据会修改原来的数据

关于深浅拷贝一直不太了解，开始尝试写一些随笔记录一哈，都是些基础知识，勿喷

1.数组

str = [1,3,5,6,7,8]
item = 7
arr01 = str
arr02 = []
console.log('0000', str);
arr01.forEach( (it, index) => {
  if (it == item) {
    arr01.splice(index, 1)
    arr02 = arr01
  }
})
console.log('11111', str);
console.log('22222', JSON.stringify([str, arr02]);


0000   [1, 3, 5, 6, 7, 8]
11111  [1, 3, 5, 6, 8]
22222  [[1,3,5,6,8],[1,3,5,6,8]]
        
        

此时改变了原数组str的值↑

str = [1,3,5,6,7,8]
item = 7
arr01 = str.slice(0) //slice不改变原数组，通过这种方式拷贝一份原数组
arr02 = []
console.log('0000', str);
arr01.forEach( (it, index) => {
  if (it == item) {
    arr01.splice(index, 1)
    arr02 = arr01
  }
})
console.log('11111', str);
console.log('22222', JSON.stringify([str, arr02]));


0000  [1, 3, 5, 6, 7, 8]
11111 [1, 3, 5, 6, 8]
22222 [[1,3,5,6,8],[1,3,5,6,8]]

原数组str未改变↑

2.对象

let obj1 = {
    name: '张三',
    age: 18,
    sex: '男'
}
let obj2 = obj1
console.log('obj2：', obj2)
obj2.age = 22
console.log('obj2：', obj2)
console.log('obj1：', obj1)



obj2： {name: "张三", age: 18, sex: "男"}
VM359:9 obj2： {name: "张三", age: 22, sex: "男"}
VM359:10 obj1： {name: "张三", age: 22, sex: "男"}

此时改变了原对象obj1的值↑

let obj1 = {
    name: '张三',
    age: 18,
    sex: '男'
}
let obj2 = JSON.parse(JSON.stringify(obj1)) //采用深拷贝的方法
console.log('obj2：', obj2)
obj2.age = 22
console.log('obj2：', obj2)
console.log('obj1：', obj1)



obj2： {name: "张三", age: 18, sex: "男"}
VM364:9 obj2： {name: "张三", age: 22, sex: "男"}
VM364:10 obj1： {name: "张三", age: 18, sex: "男"}

此时原对象obj1未改变↑