每天一个前端小知识05——浅拷贝和深拷贝

浅拷贝

浅拷贝只拷贝一层，深层次的对象或数组只是拷贝地址，源数据的改变会影响新数据的改变，例如for遍历、Object.assign()

// 浅拷贝
const person = {
name: ‘beizhen’,
hobby: [‘study’]
}
const person2 = {}
// for遍历
for (let k in person) {
person2[k] = person[k]
}

console.log(person, person2)
console.log(‘for遍历浅拷贝-------------’)
person.hobby.push(‘travel’)
console.log(person, person2)

const person3 = {}
// Object.assign()
Object.assign(person3, person)

console.log(‘Object.assign()浅拷贝-------------’)
person.hobby.push(‘play’)
console.log(person, person3)

深拷贝

深拷贝拷贝多层，深层次的对象或数组也会拷贝，源数据的改变不会影响新数据的改变，例如递归for遍历、JSON.parse(JSON.stringify(obj))—有注意事项

// 深拷贝
const person = {
name: ‘beizhen’,
hobby: [‘study’],
msg: {
age: 22
}
}

let person2 = {}

// 递归for遍历
function deepCopy(newObj, oldObj) {
for (let k in oldObj) {
// 判断数据类型,数组属于Object，所以先判断数组
if (oldObj[k] instanceof Array) {
newObj[k] = []
deepCopy(newObj[k], oldObj[k])
} else if (oldObj[k] instanceof Object) {
newObj[k] = {}
deepCopy(newObj[k], oldObj[k])
} else {
newObj[k] = oldObj[k]
}
}
}
deepCopy(person2, person)

console.log(person, person2)
console.log(‘递归for遍历深拷贝-------------’)
person.hobby.push(‘travel’)
console.log(person, person2)

// JSON.parse(JSON.stringify(obj))
let person3 = {}
person3 = JSON.parse(JSON.stringify(person))

console.log(‘JSON.parse(JSON.stringify(obj))深拷贝-------------’)
person.hobby.push(‘play’)
console.log(person, person3)