js的深拷贝和浅拷贝常用方法

最新推荐文章于 2025-04-11 00:03:45 发布

原创最新推荐文章于 2025-04-11 00:03:45 发布 · 557 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了浅拷贝与深拷贝的区别，通过实例演示了使用Object.assign(), 解构赋值, JSON.stringify及递归方法实现拷贝的过程，并分析了不同方法在处理复杂数据结构时的局限性和适用场景。

一浅拷贝

(1) Object.assign()

var obj1 = {a: 1, b: 2}
 
var obj2 = Object.assign({}, obj1)
 
obj2.a = 4
 
console.log(obj1, obj2)
// {a: 1, b: 2}, 
// {a: 4, b: 2}

(2) 解构赋值

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

但这两种拷贝有一个问题就是只能赋值一层，假设我们有如下数据结构

var obj1 = [{
    name: 'Bob',
    childs: ['kimi', 'giao']
}]
 
var obj2 = [...obj1]
 
obj2[0].childs = []
 
console.log(obj1, obj2)

在这里插入图片描述
**

二、深拷贝

(1) 利用json.stringify

var obj1 = [{
    name: 'Bob',
    childs: ['kimi', 'giao']
}]
 
var obj2 = JSON.parse(JSON.stringify(obj1))
 
obj2[0].childs = []
 
console.log(obj1, obj2)

在这里插入图片描述

var obj1 = [{
    name: 'Bob',
    childs: ['kimi', 'giao'],
    fn: function() {},
    age: undefined
}]
 
var obj2 = JSON.parse(JSON.stringify(obj1))
 
obj2[0].childs = []
 
console.log(obj1, obj2)

在这里插入图片描述
我们从结果中发现，值为undefined,或者function的时候并不会拷贝过来。

(2) 利用递归来实现一个方法进行拷贝

var obj1 = [{
    name: 'Bob',
    childs: ['kimi', 'giao'],
    fn: function() {},
    age: undefined
}]
 
var obj2 = extend(obj1)
 
obj2[0].childs = []
 
console.log(obj1, obj2)
 
function extend(data) {
    if (typeof data === 'object' && data) {
        let val = typeof data.length === 'number' ? [] : {}
        for(let i in data) {
            val[i] = extend(data[i])
        }
        return val
    } else {
        return data
    }
}

在这里插入图片描述

(3)利用loadsh的封装方法_.cloneDeep方法实现（代码略）

*

总结

拷贝的目的就是我在拷贝你之后，我和你长得一样，但是又不会影响你

通俗的讲浅拷贝只能拷贝一层（改变这一层不会相互影响），如果遇到基本数据类型直接拷贝，遇到引用类型数据就拷贝地址，例如对象obj => {a:{c:1}, b:666}实行浅拷贝后得到对象obj1,如果obj1修改b或a属性不会影响obj的b或a属性，但是如果obj1修改a.c属性会改变obj的a.c属性,深拷贝就是全部复制，二者所有层数永远独立不会相互影响