JavaScript高级：深浅拷贝

是小蟹呀^

已于 2024-02-01 17:37:22 修改

阅读量716

点赞数 30

分类专栏： JavaScript 文章标签： javascript

于 2024-02-01 17:09:57 首次发布

本文链接：https://blog.csdn.net/m0_61495539/article/details/135975997

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

4.3 js库中的lodash里面的cloneDeep内部实现深拷贝

4.4 利用JSON实现深拷贝

深浅拷贝只针对引用数据类型

1 引言

假如我们想要使用一个对象，我们之前通常使用赋值的方式，但是使用赋值的方式时，修改赋值后的对象中的数据，会影响原对象！！！

比如：

const obj = {
      name: '张三',
      age: 18,
}
console.log(obj)
const obj2 = obj;
obj2.name = '李四'
console.log(obj2)
console.log(obj)

而上述的代码只是修改了简单数据类型，如果修改复杂数据类型结果更是如此了！！！

2 浅拷贝

浅拷贝遇到复杂的数据类型拷贝的是地址

2.1 拷贝数组

方式一：

const arr1 = [1, 2, 3]
const arr = [...arr1]
console.log(arr)
arr[0] = 100
console.log(arr)
console.log(arr1)

方式二：

const arr1 = [1, 2, 3]
const arr2 = arr1.concat()
console.log(arr2)
arr2[0] = 100
console.log(arr2)
console.log(arr1)

以上两种方式可以实现单层数组的拷贝，那么如果我们遇到嵌套的数组，使用这种方式还可以吗？

例：

const arr1 = [1, [1, 2, 3], 3]
const arr2 = arr1.concat()
console.log(arr2)
arr2[1][2] = 100
console.log(arr2)
console.log(arr1)

此时我们修改拷贝后得到的数组中的数据发现，原数组也被修改了。所以当遇到单层的数组时，拷贝时，数组中只是简单数据类型，修改不会影响原数组，但是如果是嵌套的数据，数组中包含数组，那么拷贝是是直接将内层数组作为一个元素拷贝，数组属于复杂数据类型，所以最终拷贝的是地址。

1.2 拷贝对象

比如以下代码：

const obj = {
      name: '张三',
      age: 18,
      height: 1.88,
      family: {                        
          father: '李四',
          mother: '王五'
      }
}

方式一：

const o = { ...obj }
console.log(o)
o.name = '李四'
console.log(o)
console.log(obj)

方式二：

const o = Object.assign({}, obj)
console.log(o)
o.age = 20
o.family.father = '赵六'
console.log(o)
console.log(obj)

在上面的这段代码中，我们修改拷贝后的对象中的复杂数据类型，结果如下：

3 赋值操作和浅拷贝的比较

1、直接赋值的方式，只要是对象都会相互影响，因为都是直接拷贝的是栈中的地址。

2、浅拷贝如果是一层对象不会相互影响，如果出现多层对象，还是会相互影响。（因为如果拷贝的对象中是简单数据类型，直接拷贝的是值，如果是复杂数据类型拷贝的还是地址）

---> 浅拷贝在直接赋值的不足之处进行了改进，而浅拷贝同样也是需要改进，接下来将介绍深拷贝，将解决浅拷贝的不足之处

4 深拷贝

4.1 前置知识 --> 递归函数

首先递归函数是什么？简单理解就是自己调用自己。

1 例：实现阶乘

【代码】：

function fn(n) {
    if (n <= 1)
         return 1
    return n * fn(n - 1)
}
const re = fn(5)
console.log(re)

2 案例：利用递归函数实现setTimeout 模拟setInterval效果

【代码】：

function getTime() {
    document.querySelector('div').innerHTML = new Date().toLocaleString()
    setTimeout(getTime, 1000)
}
getTime()

4.2 使用递归实现深拷贝

const obj = {
    name: '张三',
    age: 18,
    hobby: ['学习', '喝酒', '烫头'],
    family: {
         father: '张三丰',
         mother: '张三娘'
    }
}

【需求】：现在需要拷贝上述 obj 对象中的所有数据，并且修改拷贝后的对象，不管修改的是简单数据类型，还是复杂数据类型，都不会影响原对象

const obj1 = {}

// 拷贝函数
function deepClone(obj1, obj) {  // onj1是新对象，  obj是旧的
    for (let key in obj) {
        // 处理数组的问题
        if (obj[key] instanceof Array) {
              obj1[key] = []
              deepClone(obj1[key], obj[key])
        } else if (obj[key] instanceof Object) {  // 处理对象的问题  因为arr 也属于对象， 所以判断对象时，写在后面
              obj1[key] = {}
              deepClone(obj1[key], obj[key])
         } else {  // 处理其他数据类型的问题

              obj1[key] = obj[key]
         }
     }
}

deepClone(obj1, obj)
obj1.age = 30
obj1.hobby[0] = '睡觉'
console.log(obj1)
console.log(obj)

4.3 js库中的lodash里面的cloneDeep内部实现深拷贝

1. 首先引入lodash.js文件

也可以使用 npm 直接安装

$ npm i -g npm
$ npm i --save lodash

2 【代码】：

const obj = {
     name: '张三',
     age: 18,
     height: 1.88,
     family: {  // 遇到这种复杂数据类型，拷贝的还是地址， 修改会相互影响
          father: '李四',
          mother: '王五'
     }
}

const obj1 = _.cloneDeep(obj)
obj1.family.father = '赵六'
console.log(obj1)
console.log(obj)

虽然使用js自带的库实现深拷贝比递归的方式简单多了，但是还用引入文件也挺麻烦的，接下来再介绍一种更简单的方式。

4.4 利用JSON实现深拷贝

【代码】：

const obj = {
      name: '张三',
      age: 18,
      height: 1.88,
      family: { 
           father: '李四',
           mother: '王五'
            }
        }

const obj1 = JSON.parse(JSON.stringify(obj))  // 先拿到的是字符串，属于简单数据类型，直接存值

console.log(obj1)
obj1.family.father = '赵六'
console.log(obj1)
console.log(obj)