JS拷贝

一. 浅拷贝

let obj = {
    name: '小明',
    info: 'Hello'
}
let newObj = Object.assign({}, obj)
newObj.name = '小红' // 第一种方式是通过assign,更改newObj的内容,不会影响到obj的内容

let newObj = {...obj}
newObj.name = '小红' // 第二种方式是通过扩展运算符,更改newObj的内容,不会影响到obj的内容
// 备注  数组也同样可以通过扩展运算符来拷贝(浅拷贝只能拷贝一层的数据,如果数据有多层,则需要进行深拷贝)

二. 深拷贝

let obj = {
    name: '小明',
    info: {
        name: '小红',
        age: 20
    }
}
let newObj = JSON.parse(JSON.stringify(obj))
newObj.info.name = '小张' // 第一种方式可以通过JSON数据转换拷贝
console.log(obj, newObj)


function deeClone(item) {
    // 如果传入值为空就不做处理
    if (item === null) {
        return item
    }
    // 判断传入值是数组还是对象,好根据传入值生成一个新的空对象或空数组
    let target = Array.isArray(item) ? [] : {}
    for(let i in item) { // 循环传入的数据
        let row = item[i]
        let valueType = typeof row
        // 校验拷贝对象类型
        switch (valueType) {
            case 'object' : { // 如果循环中的数据还嵌套多层数据,就重新调用拷贝函数
                target[i] = deeClone(row)
            }
                break
            default : { // 否则就可以直接像新生成的空数组或空对象中拷贝进入数据
                target[i] = row
            }
        }
    }
    return target
}
const obj1 = { name: 'dog', info: { age: 3 } }
let newObj = deeClone(obj1)
console.log(newObj)
newObj.info.age = 6
console.log(obj1, newObj) 
// 备注  自己写的总是有漏洞,可以参考一些现成的拷贝库比如使用第三方库Lodash中的_.cloneDeep(value)

 

posted @ 2022-01-27 15:06  格里兹曼  阅读(350)  评论(0编辑  收藏  举报