JavaScript 的浅拷贝和深拷贝

最新推荐文章于 2023-03-24 20:07:20 发布
最新推荐文章于 2023-03-24 20:07:20 发布
阅读量101 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44871058/article/details/117089576
版权

什么是浅拷贝和深拷贝

  • 拷贝：指拷贝源对象到目标对象，又分为浅拷贝和深拷贝两种
  • 浅拷贝：如拷贝的对象有属性值是非基础类型（即对象），则浅拷贝拷贝的是对象的引用，而非对象本身，拷贝完成以后更改目标对象，源对象也会被更改
  • 深拷贝：深拷贝完美解决了浅拷贝存在的问题，目标对象是一个全新的对象，更改目标对象不会影响到源对象

浅拷贝

Object.assign()

// 对象的属性值都是基础类型
console.log('--------对象的属性值都是基础类型--------')
const src1 = { a: 'aa' }
const target1 = Object.assign({}, src1)
// 输出源对象
console.log('源对象: ', src1)  // {a: "aa"}
// 输出拷贝后的目标对象
console.log('目标对象: ', target1)  // {a: "aa"}
// 更改目标对象
target1.a = 'aaa'
console.log('更改目标对象后的结果: ')
// 输出更改后的目标对象
console.log('目标对象: ', target1)  // {a: "aaa"}
// 输出源对象，发现源对象没有被改变
console.log('源对象: ', src1)  // {a: "aa"}

// 对象的属性值为非基础类型
console.log('--------对象的属性值为非基础类型--------')
const src2 = {flag: 'src2', a: { b: 'bb' } }
const target2 = Object.assign({}, src2)
// 输出源对象
console.log('源对象: ', src2)  // {flag: "src2", a: {b: "bb"}}
// 输出目标对象
console.log('目标对象: ', target2)  // {flag: "src2", a: {b: "bb"}}
// 更改目标对象
target2.flag = 'target2'
target2.a.b = 'bbb'
console.log('更改目标对象后的结果: ')
// 输出更改后的目标对象
console.log('目标对象: ', target2)  // {flag: "target2", a: {b: "bbb"}}
// 输出源对象，发现源对象被改了
console.log('源对象: ', src2)  // {flag: "src2", a: {b: "bbb"}}

in运算符

// 通过for in循环复制对象
function copy (target, src) {
  for (let key in src) {
    // 过滤掉原型链上的属性，只复制src对象自身的属性和值
    if (src.hasOwnProperty(key)) {
      target[key] = src[key]
    }
  }
  return target
}
// 对象的属性值都是基础类型
console.log('--------对象的属性值都是基础类型--------')
const src1 = { a: 'aa' }
const target1 = copy({}, src1)
// 输出源对象
console.log('源对象: ', src1)  // {a: "aa"}
// 输出拷贝后的目标对象
console.log('目标对象: ', target1)  // {a: "aa"}
// 更改目标对象
target1.a = 'aaa'
console.log('更改目标对象后的结果: ')
// 输出更改后的目标对象
console.log('目标对象: ', target1)  // {a: "aaa"}
// 输出源对象，发现源对象没有被改变
console.log('源对象: ', src1)  // {a: "aa"}

// 对象的属性值为非基础类型
console.log('--------对象的属性值为非基础类型--------')
const src2 = {flag: 'src2', a: { b: 'bb' } }
const target2 = copy({}, src2)
// 输出源对象
console.log('源对象: ', src2)  // {flag: "src2", a: {b: "bb"}}
// 输出目标对象
console.log('目标对象: ', target2)  // {flag: "src2", a: {b: "bb"}}
// 更改目标对象
target2.flag = 'target2'
target2.a.b = 'bbb'
console.log('更改目标对象后的结果: ')
// 输出更改后的目标对象
console.log('目标对象: ', target2) // {flag: "target2", a: {b: "bbb"}}
// 输出源对象，发现源对象被改了
console.log('源对象: ', src2)  // {flag: "src2", a: {b: "bbb"}}

深拷贝

JSON

  • 优点
    javascript的内置方法，简单、性能好
  • 缺点
    会忽略掉对象中属性值为undefined和函数的属性
    由于方法的底层实现用了递归，如果对象存在循环引用，会爆栈（报循环引用的错）

实现

// 直接上对象的属性值为非基础类型的对象
const src = { flag: 'src', a: { b: 'bb' } }
console.log('源对象: ', src)  // 源对象:  {flag: "src", a: {b: "bb"}}
const target = JSON.parse(JSON.stringify(src))
console.log('目标对象: ', target) // 目标对象: {flag: "src", a: {b: "bb"}}
console.log('--------更改目标对象--------')
target.flag = 'target'
target.a.b = 'bbb'
console.log('目标对象: ', target)  // 目标对象:  {flag: "target", a: {b: "bbb"}}
// 发现源对象没有被改变
console.log('源对象: ', src)  // 源对象: {flag: "src", a: {b: "bb"}}

// 异常情况 - 属性值为undefined和function的情况
const obj = { a: 'a', b: undefined, c: function () { conole.log('c function') }}
console.log('源对象: ', obj)  // 源对象:  {a: "a", b: undefined, c: ƒ}
const copyObj = JSON.parse(JSON.stringify(obj))
// 对象的b和c属性不见了
console.log('拷贝后的目标对象: ', copyObj)  // 拷贝后的目标对象:  {a: "a"}

// 异常情况 - 对象存在循环引用
const objLoop = {}
const b = {objLoop}
objLoop.b = b
console.log('源对象: ', objLoop) // {b: {objLoop: {b: {objLoop: {b: ...}}}}}
// 报错: Uncaught TypeError: Converting circular structure to JSON
const copyObjLoop = JSON.parse(JSON.stringify(objLoop))

MessageChannel

  • 优点
    JavaScript的内置API，简单，且可以复制属性值为undefined的对象，也可以解决循环引用的问题
  • 缺点
    对象有属性值为函数时会报错
    方法是异步的

实现

// 拷贝方法
function deepCopy (obj) {
  return new Promise((resolve, reject) => {
    const {port1, port2} = new MessageChannel()
    port1.postMessage(obj)
    port2.onmessage = function(e) {
      resolve(e.data)
    }
  })
}

// 示例一，正常对象
// 源对象
let src = { flag: 'src', a: { b: 'bb' } }
// 目标对象
let target = {}
deepCopy(src).then(res => {
  target = res
  console.log('源对象: ', src)  // 源对象:  {flag: "src", a: {b: "bb"}}
  console.log('目标对象: ', target) // 目标对象: {flag: "src", a: {b: "bb"}}
  console.log('--------更改目标对象--------')
  target.flag = 'target'
  target.a.b = 'bbb'
  console.log('目标对象: ', target)  // 目标对象:  {flag: "target", a: {b: "bbb"}}
  // 发现源对象没有被改变
  console.log('源对象: ', src)  // 源对象: {flag: "src", a: {b: "bb"}}
})

// 示例二，属性值为undefined的情况
const obj = { a: 'a', b: undefined}
target = {}
deepCopy(obj).then(res => {
  console.log('源对象: ', obj)  // 源对象:  {a: "a", b: undefined, c: ƒ}
  target = res
  console.log('拷贝后的目标对象: ', target)  // 拷贝后的目标对象:  {a: "a", b: undefined}
})

// 示例三， 属性值有函数时，会报错: Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'MessagePort': function () {} could not be cloned.
/*
const obj1 = { a: 'a', b: undefined, c: function () {}}
target = {}
deepCopy(obj1).then(res => {
  console.log('源对象: ', obj)  // 源对象:  {a: "a", b: undefined, c: ƒ}
  target = res
  console.log('拷贝后的目标对象: ', target)
})
*/

// 示例四，循环引用
const obj2 = {}
const b = {obj2}
obj2.b = b
target = {}
deepCopy(obj2).then(res => {
  console.log('源对象: ', obj2) // {b: {obj2: {b: {obj2: {b: ...}}}}}
  target = res
  console.log('目标对象: ', target) // {b: {obj2: {b: {obj2: {b: ...}}}}}
})

递归

  • 优点
    可以解决JSON方式忽略属性值为undefined和function的属性的问题

  • 缺点
    对象存在循环引用时仍然会爆栈

实现

// 深拷贝方法
function deepCopy (obj) {
  const target = {}
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // key为对象自身可枚举的属性
      if (Object.prototype.toString.call(obj[key]) === '[object Object]') {
        // 属性值为对象，递归调用
        target[key] = deepCopy(obj[key])
      } else {
        target[key] = obj[key]
      }
    }
  }
  return target
}

// 示例一
const obj1 = {a: 'a', b: {c: 'cc'}}
console.log('源对象: ', obj1) // 源对象:  {a: "a", b: {c: "cc"}}
const copyObj1 = deepCopy(obj1)
console.log('拷贝后的目标对象: ', copyObj1) // 拷贝后的目标对象:  {a: "a", b: {c: "cc"}}
console.log('-----改变目标对象的属性---------')
copyObj1.b = 'bb'
console.log('源对象: ', obj1) // 源对象:  {a: "a", b: {c: "cc"}}
console.log('目标对象: ', copyObj1) // 目标对象:  {a: "a", b: "bb"}

// 示例二， 对象存在循环引用
const objLoop = {}
const b = {objLoop}
objLoop.b = b
console.log('源对象: ', objLoop) // {b: {objLoop: {b: {objLoop: {b: ...}}}}}
// 报错: Uncaught RangeError: Maximum call stack size exceeded
const copyObjLoop = deepCopy(objLoop)

闭包 + 递归

说明

解决了JSON方式和递归方式存在的问题，可实现真正的深拷贝

实现

// 深拷贝方法
function deepCopy (copyObj) {
  // 用来记录已经拷贝过的属性值为对象的属性以及属性的值，解决递归循环引用对象的爆栈问题
  const cache = {}

  // 拷贝对象
  function copy (obj) {
    const target = {}
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        // key为对象自身可枚举的属性
        if (Object.prototype.toString.call(obj[key]) === '[object Object]') {
          // 属性值为对象
          if (cache[obj[key]]) {
            // 说明该属性已经被拷贝过一次，现在又拷贝，证明出现了循环引用
            target[key] = cache[obj[key]]
          } else {
            cache[obj[key]] = obj[key]
            target[key] = copy(obj[key])
          }
        } else {
          target[key] = obj[key]
        }
      }
    }
    return target
  }
  return copy(copyObj)
}


// 示例一
const obj1 = {a: 'a', b: {c: 'cc'}}
console.log('源对象: ', obj1) // 源对象:  {a: "a", b: {c: "cc"}}
const copyObj1 = deepCopy(obj1)
console.log('拷贝后的目标对象: ', copyObj1) // 拷贝后的目标对象:  {a: "a", b: {c: "cc"}}
console.log('-----改变目标对象的属性---------')
copyObj1.b = 'bb'
console.log('源对象: ', obj1) // 源对象:  {a: "a", b: {c: "cc"}}
console.log('目标对象: ', copyObj1) // 目标对象:  {a: "a", b: "bb"}

// 示例二， 对象存在循环引用
const objLoop = {}
const b = {objLoop}
objLoop.b = b
console.log('源对象: ', objLoop) // 源对象: {b: {objLoop: {b: {objLoop: {b: ...}}}}}
const copyObjLoop = deepCopy(objLoop)
console.log('目标对象: ', copyObjLoop) // 目标对象: {b: {objLoop: {b: {objLoop: {b: ...}}}}}
console.log('-----改变目标对象------')
copyObjLoop.b = 'bb'
console.log('源对象: ', objLoop) // 源对象: {b: {objLoop: {b: {objLoop: {b: ...}}}}}
console.log('目标对象: ', copyObjLoop) // 目标对象: {b: "bb"}
MK_麦客
关注
专栏目录
Javascript 浅拷贝、深拷贝的实现代码
10-30
总结来说，浅拷贝和深拷贝是JavaScript中处理对象复制的关键概念，它们在处理复杂数据结构时尤为重要，特别是在需要保持原始数据不变性的场景下。了解和掌握这两种拷贝方式，能够帮助开发者更好地理解和控制对象之间...
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
12-09
需要知道的就是一点：JavaScript的数据类型分为基本数据类型和引用数据类型。 对于基本数据类型的拷贝，并没有深浅拷贝的区别，我们所说的深浅拷贝都是对于引用数据类型而言的。 浅拷贝 浅拷贝的意思就是只复制引用...
libuv套接字绑定失败导致的退出异常
smartcore
08-18 1015
1、问题 套按字绑定失败导致的loop退出异常 2、环境 libuv版本：1.42.0及以下 OS版本：win10 x64 3、现象 uv_async_send的回调方法中，使用uv_udp_bind（或者uv_tcp_bind，后文以udp举例），将一个本机不存在的IP，绑定到uv_udp_t（或者uv_tcp_t）代表的handle（new创建），绑定返回失败后，对handle进行释放（delete）；在退出loop的过程中，应用发生异常。 备注：由于主机IP的人为修改等业务性操作
Uncaught (in promise) 的解决方法
想飞的猪的博客
04-09 20万+
在微信小程序开发过程中，使用了promise,但是在使用的过程中报Uncaught (in promise)错误，第一次遇到这种错误，所以在此记录下，方便以后解决问题 getImage: function(url) { return new Promise((resolve, reject) => { wx.getImageInfo({ src: ...
Uncaught (in promise) 的解决方法，可能原因
热门推荐
一点光辉的博客
08-05 21万+
// http response 拦截器 service.interceptors.response.use( response => { debugger if (!response.config.noLoading) { closeLoading() } if (response.data instanceof Blob) { return Promise.resolve(response.data) } else if (re.
Uncaught (in promise) TypeError: this.setState is not a function 报错的原因及解决方法
Curtis的博客
11-25 1万+
Uncaught (in promise) TypeError: this.setState is not a function 报错的原因及解决方法 原因： 多数原因是由于this的指向错误，在我们自定义函数的时候常常会出现 解决方法： 将函数的这种写法 Fn (value) = { console.log(...) } 换成箭头函数就可以了 Fn= (value) => { console.log(...) } ...
论truffle-contract框架与Web3.js（1.0版本）之间的较量（由于ES6、nodejs和原生js的版本问题，太多坑了，足足搞了我三天才解决根本bug）
weixin_43343144的博客
03-12 751
论truffle-contract框架与Web3.js（1.0版本）之间的较量总结了一下，出现了如下三大错误！这个三大错误问题的根本就是一个【truffle-contract库和Web3.js同时导入（注：原生js文件导入不影响）】同时导入，通过nodejs(require语句)或ES6(import)语句导入，会冲突打架，其实在truffle-contract框架已经使用require语句导入了...
JavaScript 浅拷贝和深拷贝
前端开发
02-03 554
JavaScript 中对象的赋值是通过将一个对象的引用赋值给另一个变量，两个变量指向同一个内存地址。这意味着如果更改其中一个对象的值，另一个对象的值也会更改。 浅拷贝是将一个对象的值复制给另一个对象，但如果对象中包含对其他对象的引用，则这些引用仍然指向原来的对象。 深拷贝是完全复制一个对象及其中包含的所有对象。
JavaScript浅拷贝和深拷贝
王等等csdn的博客
04-14 869
一.JavaScript的两种变量类型 JavaScript变量的类型分为两种：基本类型和引用类型。 基本类型是指简单的数据段，包含 String、Number、 Boolean、Undefined 和 Null。 基本类型是按值访问的，例如：修改b的值，a的值没有改变。var a = 1; var b = a; b = 5; console.log(a) //1 console.log(b) //5 引用类型是指可能有多个值构成的对象，一般为： Object, Array, function 等
javaScript 浅拷贝和深拷贝
最新发布
平安喜乐
03-24 890
先聊一下javaSCript的数据类型有哪些浅拷贝只是复制了值类型 引用类型也能复制过去，不过复制的是引用类型的指针地址 ，如果后面对其修改双方都会产生修改，而不是真正的拷贝，== 因此存在父对象被篡改的可能。==深拷贝就是不但复制了值类型也复制了引用类型 不过引用类型的指针地址是独立存在的 == 互相修改不影响 ==
javascript浅拷贝和深拷贝
weixin_47450807的博客
01-10 201
javascript浅拷贝和深拷贝 在javascript中存在对象拷贝的问题，今天总结一下浅拷贝和深拷贝 一、浅拷贝 就是拷贝的比较浅，这是将一些基本属性拷贝过去，但是如果存在属性中的值是对象，则不会进行拷贝其中的中，只是将其地址拷贝过来。 <script> let obj = { id:20, name:"dmc", msg:{ age:19, } } let o = {}; for(let k in o
JavaScript深拷贝和浅拷贝概念与用法实例分析
01-19
本文实例讲述了JavaScript深拷贝和浅拷贝概念与用法。分享给大家供大家参考，具体如下： js中的浅拷贝和深拷贝，只是针对复杂数据类型(Objcet，Array)的复制问题。简单来讲浅拷贝和深拷贝都可以实现在原有对象的基础...
javascript深拷贝、浅拷贝和循环引用深入理解
10-18
JavaScript中的深拷贝和浅拷贝是编程中常见的概念，主要涉及到对象和数组的复制。在JavaScript中，数据类型分为基本数据类型（如Number、String、Boolean等）和引用数据类型（如Object、Array等）。基本类型直接存储...
s的数据类型有哪些，值是如何存储的
weixin_44871058的博客
05-17 4112
JavaScript一共有8种数据类型，其中有7种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值）和BigInt（es10新增）； 1种引用数据类型——Object（Object本质上是由一组无序的名值对组成的）: 里面包含 function、Array、Date等。JavaScript不支持任何创建自定义类型的机制，而所有值最终都将是上述 8 种数据类型之一。 原始数据类型： 直接存储在栈（stack）中，占据空间小、大小
qrcodejs2
weixin_44871058的博客
05-14 1241
使用第三方包将当前路径转为二维码 使用步骤： 下载第三方包： npm install qrcodejs2 --save 导入第三方包： import QRCode from 'qrcodejs2' 调用： 添加结构： <div id="qrcode" ref="qrcode"></div> 调用方法： getQRcode() { var res = new QRCode({ width: 200, // 二维码的宽 height: 200, // 二维码的高
哪些操作会造成内存泄漏？
weixin_44871058的博客
05-18 1188
1.意外的全局变量 2.被遗忘的计时器或回调函数 3.脱离 DOM 的引用 4.闭包 第一种情况是我们由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。 第二种情况是我们设置了setInterval定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。 第三种情况是我们获取一个DOM元素的引用，而后面这个元素被删除，由于我们一直保留了对这个元素的引用，所以它也无法被回收。 第四种情况是不合理的使用闭包，从而导致某些变量
input 搜索如何防抖，如何处理中文输入
weixin_44871058的博客
05-13 547
<input id='myinput'> function jeiliu(timeout){ var timer; function input(e){ if(e.target.composing){ return ; } if(timer){ clearTimeout(timer); } timer = setTimeout(.
实现函数能够深度克隆基本类型
weixin_44871058的博客
05-15 371
浅克隆： function shallowClone(obj) { let cloneObj = {}; for (let i in obj) { cloneObj[i] = obj[i]; } return cloneObj; } 深克隆： 考虑基础类型 引用类型 RegExp、Date、函数 不是 JSON 安全的 会丢失 constructor，所有的构造函数都指向 Object 破解循环引用 function deepCopy(obj) { if (ty
js数组和字符串有哪些原生方法
weixin_44871058的博客
05-17 215
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值