javaScript中的深浅拷贝

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量243 收藏 1
点赞数 11
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59108404/article/details/140659291
版权

首先明确 javaScript 中简单数据类型由于变量中保存的是数据的字面量，因此只需用’='赋值的方式进行拷贝即可。javaScript 的深浅拷贝只针对于复杂数据类型，例如数组、对象。

使用’='拷贝存在的问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 数组类型
    const arr = [1, 2, 3]

    // 直接赋值
    const newArr = arr
    console.log(newArr)  // [1, 2, 3]

    // 改变newArr中的数据
    newArr[0] = 4
    console.log(arr)  // [4, 2, 3]

    // 对象类型
    const obj = {
      name: '小明',
      age: 18
    }

    // 直接赋值
    const newObj = obj
    console.log(newObj)  // {name: '小明', age: 18}

    // 改变newObj中的数据
    newObj.age = 20
    console.log(obj)  // {name: '小明', age: 20}
  </script>
</body>
</html>

当使用’='赋值的方式进行复杂数据类型的拷贝时，可以得到该数据的副本，当对副本进行修改时，原数据也会发生改变，这是因为它们保存的是数据的地址。

浅拷贝

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 数组类型
    const arr = [1, 2, 3]

    // 浅拷贝方式一：
    const newArr = Array.prototype.concat(arr)
    console.log(newArr)  // [1, 2, 3]

    // 改变newArr中的数据
    newArr[0] = 4
    console.log(arr)  // [1, 2, 3]

    // 浅拷贝方式二：
    const newArr2 = [...arr]
    console.log(newArr2)  // [1, 2, 3]

    // 改变newArr2中的数据
    newArr2[0] = 5
    console.log(arr)  // [1, 2, 3]

    // 对象类型
    const obj = {
      name: '小明',
      age: 18
    }

    // 浅拷贝方式一：
    const newObj = {}
    Object.assign(newObj, obj)
    console.log(newObj)  // {name: '小明', age: 18}

    // 改变newObj的数据
    newObj.age = 20
    console.log(obj)  // {name: '小明', age: 18}

    // 浅拷贝方式二：
    const newObj2 = {...obj}
    console.log(newObj2)  // {name: '小明', age: 18}

    // 改变newObj2的数据
    newObj2.age = 30
    console.log(obj)  // {name: '小明', age: 18}
  </script>
</body>
</html>

数组和对象的两种浅拷贝方式，不仅能够拷贝出原数据，并且修改数据不改变原数据，这是因为浅拷贝是拷贝的地址。但是浅拷贝依然存在一个问题，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 数组类型
    const arr = [1, 2, [3, 4]]

    // 浅拷贝：
    const newArr = Array.prototype.concat(arr)
    console.log(newArr)  // [1, 2, [3, 4]]

    // 改变newArr中的数据
    newArr[2][0] = 5
    console.log(arr)  // [1, 2, [5, 4]]

    // 对象类型
    const obj = {
      name: '小明',
      age: 18,
      family: {
        mother: 'mom',
        father: 'dad'
      }
    }

    // 浅拷贝：
    const newObj = {}
    Object.assign(newObj, obj)
    console.log(newObj)  // {name: '小明', age: 18, family: {mother: 'mom', father: 'dad'}}

    // 改变newObj的数据
    newObj.family.mother = 'mom2'
    console.log(obj)  // {name: '小明', age: 18, family: {mother: 'mom2', father: 'dad'}}
  </script>
</body>
</html>

当数组或是对象中又嵌套了数组或对象，改变这里面的值依然会影响原数据。

深拷贝

深拷贝，拷贝的是对象本身，而不是地址了，因此，无论嵌套了多少层，对其修改都不会影响原数据。
这里介绍三种深拷贝的方式：

1、利用递归自定义深拷贝函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 递归实现深拷贝
    function deepCopy(newObj, oldObj) {
      for (let k in oldObj) {
        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]
        }
      }
    }

    // 数组类型
    const arr = [1, 2, [3, 4]]

    // 深拷贝
    const newArr = []
    deepCopy(newArr, arr)
    console.log(newArr)  // [1, 2, [3, 4]]

    // 改变newArr中的数据
    newArr[2][0] = 5
    console.log(arr)  // [1, 2, [3, 4]]

    // 对象类型
    const obj = {
      name: '小明',
      age: 18,
      family: {
        mother: 'mom',
        father: 'dad'
      }
    }

    // 深拷贝
    const newObj = {}
    deepCopy(newObj, obj)
    console.log(newObj)  // {name: '小明', age: 18, family: {mother: 'mom', father: 'dad'}}

    // 改变newObj中的数据
    newObj.family.mother = 'mom2'
    console.log(obj)  // {name: '小明', age: 18, family: {mother: 'mom', father: 'dad'}}
  </script>
</body>
</html>

2、利用lodash库中的cloneDeep方法实现深拷贝

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="js/lodash.min.js"></script>
  <script>
    // 数组类型
    const arr = [1, 2, [3, 4]]

    // 深拷贝
    const newArr = _.cloneDeep(arr)
    console.log(newArr)  // [1, 2, [3, 4]]

    // 改变newArr中的数据
    newArr[2][0] = 5
    console.log(arr)  // [1, 2, [3, 4]]

    // 对象类型
    const obj = {
      name: '小明',
      age: 18,
      family: {
        mother: 'mom',
        father: 'dad'
      }
    }

    // 深拷贝
    const newObj = _.cloneDeep(obj)
    console.log(newObj)  // {name: '小明', age: 18, family: {mother: 'mom', father: 'dad'}}

    // 改变newObj中的数据
    newObj.family.mother = 'mom2'
    console.log(obj)  // {name: '小明', age: 18, family: {mother: 'mom', father: 'dad'}}
  </script>
</body>
</html>

3、通过JSON.stringify()实现深拷贝

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="js/lodash.min.js"></script>
  <script>
    // 数组类型
    const arr = [1, 2, [3, 4]]

    // 深拷贝
    const newArr = JSON.parse(JSON.stringify(arr))
    console.log(newArr)  // [1, 2, [3, 4]]

    // 改变newArr中的数据
    newArr[2][0] = 5
    console.log(arr)  // [1, 2, [3, 4]]

    // 对象类型
    const obj = {
      name: '小明',
      age: 18,
      family: {
        mother: 'mom',
        father: 'dad'
      }
    }

    // 深拷贝
    const newObj = JSON.parse(JSON.stringify(obj))
    console.log(newObj)  // {name: '小明', age: 18, family: {mother: 'mom', father: 'dad'}}

    // 改变newObj中的数据
    newObj.family.mother = 'mom2'
    console.log(obj)  // {name: '小明', age: 18, family: {mother: 'mom', father: 'dad'}}
  </script>
</body>
</html>

总结

1、浅拷贝的方式：

数组：Array.prototype.concat()、[…arr]
对象: Object.assign()、{…obj}

2、深拷贝的方式：

递归实现：

function deepCopy(newObj, oldObj) {
      for (let k in oldObj) {
        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]
        }
      }
    }

引入lodash库调用cloneDeep()函数实现；
通过JSON.parse(JSON.stringify())实现

梁平欧文
关注
详细分析JavaScript中的深浅拷贝
01-18
在说JS中深浅拷贝之前，我们需要对JS中的数据类型有所了解，分为基本数据类型与引用数据类型，对于基本数据类型并没有深浅拷贝的说法，深浅拷贝主要针对引用数据类型。 一、浅拷贝 浅拷贝只复制了引用，并没有复制...
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
12-09
说到深浅拷贝，必须先提到的是JavaScript的数据类型，之前的一篇文章JavaScript基础心法——数据类型说的很清楚了，这里就不多说了。 需要知道的就是一点：JavaScript的数据类型分为基本数据类型和引用数据类型。 ...
JavaScript深浅拷贝
码农键盘上的梦
03-16 539
在前端开发中，有时我们需要对一个复杂的数据结构进行变换，例如将一个嵌套的对象转换为数组或将一个数组转换为嵌套的对象。深拷贝是对对象或数组进行递归复制，复制整个对象的所有层次，这样就可以避免对象中的引用类型的属性共享的问题。浅拷贝是对对象或数组进行浅层复制，只复制对象的一层属性，当复制的对象中有引用类型的属性时，复制出来的对象和原对象会共享引用类型的属性。通过展开一个对象，可以将其属性复制到新的对象中。总之，在前端开发中，深拷贝是非常常见的场景，可以帮助我们处理复杂的数据结构，并保持代码的稳定性和可维护性。
浅谈JavaScript中深浅拷贝
super_xxy的博客
02-29 153
为什么会有深浅拷贝？ 对于为什么会有深浅拷贝的问题，是由于js中对基本数据类型和引用数据类型的操作方式是不一样的，基本类型指的是简单的数据段，而引用类型指的是一个对象保存在堆内存中的地址。js是不允许我们直接操作内存地址的，所以说我们是不能操作对象的内存空间，我们对对象的操作都只是在操作他的指针而已。 浅拷贝 就是对数组和对象简单的复制和拷贝，主要复制的是引用数据类型的内存地址，因此地址相同...
javascript之深浅拷贝
编程界明世隐的博客
12-05 3051
浅拷贝： 浅拷贝只拷贝基本类型的数据，而符合类型的数据只复制指向其的指针，而不复制对象本身，新旧对象还是共享同一块内存。 深拷贝： 深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。 浅拷贝的实例: /** * 浅拷贝 * * @param {Object} target 目标对象 * @param {Object} source 源对象 * @return {Object} 返回目标对象 */ function extend(target, s
JavaScript之深浅拷贝
feb的博客
03-17 354
上篇博客中简单介绍了JS中的引用类型，本篇博客就简单介绍下JS的深浅拷贝，以后有时间再对深浅拷贝做个扩展。原始类型是保存在栈内存中的，对于它们的复制可以理解为“真实”复制，即重新开辟栈内存并将原来的值copy一份放进去。那么修改copy的那个值并不会影响原始值，因为它们是独立的。 先看看原始类型和引用类型的存储方式：（图片摘自https://www.cnbl...
JavaScript的深浅拷贝
weixin_44786791的博客
04-06 184
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。 浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)
详谈JavaScript深浅拷贝
通俗易懂
05-05 405
详谈JavaScript深浅拷贝 目录详谈JavaScript深浅拷贝为什么？浅拷贝深拷贝 为什么？ 什么是拷贝：复杂粘贴 为什么分深浅拷贝： JavaScript里面的数据存储分为两种： 简单数据类型：存储在栈里面 复杂数据类型：地址存在栈里面，数据存储在堆里面 而复杂粘贴是在操作栈里面的数据 需要使用的数据： let obj = { name: 'JavaScript', ...
JavaScript高级：深浅拷贝
xiaoxie_life_study
02-01 751
JavaScript高级：深浅拷贝：1 引言；2 浅拷贝；3 赋值操作和浅拷贝的比较；4 深拷贝
Javascript 中的深浅拷贝
hellogril前端库
12-21 239
工作中经常会遇到需要复制 JS 数据的时候，遇到 bug 时实在令人头疼；面试中也经常会被问到如何实现一个数据的深浅拷贝，但是你对其中的原理清晰吗？一起来看一下吧！ 为什么会有深浅拷贝 想要更加透彻的理解为什么 JS 会有深浅拷贝，需要先了解下 JS 的数据类型有哪些，一般分为基本类型（Number、String、Null、Undefined、Boolean、Symbol ）和引用类型（对象、数组...
javascript简单实现深浅拷贝过程详解
10-16
JavaScript是一种广泛使用的前端脚本语言，其中深浅拷贝的概念在实际开发中尤为重要。深浅拷贝主要涉及对象、数组这类引用类型数据的复制。在ES5版本的JavaScript中，数据类型分为两大类：基本类型和引用类型。基本...
js中的深浅拷贝问题简析
10-17
在JavaScript中，我们经常会遇到需要拷贝...总的来说，理解JavaScript中深浅拷贝的概念和区别，有助于我们编写更加健壮和高效的代码。在实际开发中，根据数据结构的复杂度和业务需求来选择合适的拷贝方式是至关重要的。
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 891
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 420
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 588
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 326
【代码】如何使用Redisson的布隆过滤器？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1168
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
React响应式修改数组和对象
警警的博客
09-30 779
React的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。你不能直接修改对象中的属性，而是需要创建一个新的对象来更新状态。不可变性（Immutability）：React中的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。避免直接修改状态：React的状态是不可变的，直接修改状态（如this.state.items.push(4)）不会触发重新渲染，因为React无法检测到这种变化。// 修改name属性。
JavaScript深浅拷贝解析
本文主要探讨JavaScript中的深浅拷贝概念，重点关注引用数据类型的拷贝行为。浅拷贝仅复制对象的引用，而不复制其实际值，因此修改副本会影响到原始对象。而深拷贝则创建一个全新的对象，包含了原始对象的所有值，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值