浅拷贝

var obj1 = { a: 1, b: 2 }
var obj2 = obj1
obj2.a = 2
console.log(obj1) //输出{ a: 2, b: 2 }
console.log(obj2) //输出{ a: 2, b: 2 }

深拷贝

//将对象序列化再解析
var obj1 = { a: 1, b: 2 }
var obj2 = JSON.parse(JSON.stringify(obj1))
obj2.a = 2
console.log(obj1) //输出{ a: 1, b: 2 }
console.log(obj2) //输出{ a: 2, b: 2 }

半深半浅

//es6扩展运算符只能克隆第一层
var obj1 = { a: 1, b: {c:1} }
var obj2 = {...obj1}
obj2.a = 2
obj2.b.c = 2
console.log(obj1) //输出{ a: 1, b: { c: 2 } }
console.log(obj2) //输出{ a: 2, b: { c: 2 } }

递归深拷贝(推荐)

//通过递归将每一层都处理一遍
function deepClone(obj) {
    // 对常见的“非”值，直接返回原来值
    if ([null, undefined, NaN, false].includes(obj)) return obj
    if (typeof obj !== 'object' && typeof obj !== 'function') {
        // 原始类型直接返回
        return obj
    }
    const o = test.array(obj) ? [] : {}
    for (const i in obj) {
        if (obj.hasOwnProperty(i)) {
            o[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
        }
    }
    return o
}
var obj1 = { a: 1, b: {c:1} }
var obj2 = deepClone(obj1)
obj2.a = 2
obj2.b.c = 2
console.log(obj1) //输出{ a: 1, b: { c: 1 } }
console.log(obj2) //输出{ a: 2, b: { c: 2 } }
最后修改：2022 年 06 月 07 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏