手写JS系列-深拷贝

分手后的思念是犯贱 2022-08-29 00:26 135阅读 0赞

我们知道JS中数据类型分为基本数据类型和引用数据类型，基本数据类型之间的赋值是在内存中重新分配空间且保存着一样的值，而引用类型之间的赋值只是复制引用值，当原来对象中的属性值发生变化，另一个对象的属性值也会发生变化，这种现象正常来说并不是我们想要的。深拷贝就是要实现复制一个对象，且保证两个对象在内存中互相独立，一个对象属性值的改变不影响已拷贝的对象中的属性值。简单的代码实现如下：

let obj = { 
      name: '小明',
      colors: ['red', 'green', 'blue'],
      address: { 
        province: '广东',
        city: '广州'
      }
    }
    function deepClone(obj) { 
      // 如果要拷贝的值不是引用类型的，原值返回
      if(typeof obj !== 'object' || obj == null) { 
        return obj
      }
    
      let cloneObj
      if(obj instanceof Array) { 
        cloneObj = []
      }else { 
        cloneObj = { }
      }
      for(let key in obj) { 
        // 只拷贝对象自身的属性值，不拷贝原型上的属性值
        if(obj.hasOwnProperty(key)) { 
          cloneObj[key] = deepClone(obj[key])
        }
      }
      return cloneObj
    }
    
    let newObj = deepClone(obj)
    console.log(obj)
    newObj.colors[0] = 'black'
    newObj.address.city = '深圳'
    console.log(newObj)

输出

/* { name: '小明', colors: [ 'red', 'green', 'blue' ], address: { province: '广东', city: '广州' } } { name: '小明', colors: [ 'black', 'green', 'blue' ], address: { province: '广东', city: '深圳' } } */

观察结果，新对象属性值的改变不影响原来的对象。

发表评论取消回复

表情：

评论列表（有 0 条评论，135人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript中手写深拷贝函数-事件总线

1.手写深拷贝函数 > 前面我们已经学习了对象相互赋值的一些关系，分别包括: > > 引入的赋值：指向同一个对象，相互之间会影响； > 对象的浅拷贝：只是浅

ゝ一世哀愁。/ 2023年09月28日 13:13/ 0 赞/ 71 阅读

相关浅析JS深拷贝

常用的拷贝方案： `JSON.parse(JSON.stringfily())` `Object.assign()` 递归实现 `JSON.parse(

左手的ㄟ右手/ 2023年01月13日 09:35/ 0 赞/ 102 阅读

相关递归手写深拷贝 ===== js数据类型判断

递归手写深拷贝前提： > 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。 1. 堆栈内存具体看另一篇博客数据类型、堆栈存储

偏执的太偏执、/ 2022年12月26日 11:09/ 0 赞/ 92 阅读

相关递归手写深拷贝

前提： > 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。 1. 堆栈内存具体看另一篇博客[数据类型、堆栈存储][Link 1] 2. 浅

￡神魔★判官ぃ/ 2022年12月17日 10:59/ 0 赞/ 161 阅读

相关前端---JS深拷贝

<html> <head> </head> <body> </body> </html>

清疚/ 2022年12月06日 15:16/ 0 赞/ 136 阅读

相关 JS 手写深拷贝

JS 手写深拷贝方法一： <!DOCTYPE html> <html lang="en"> <head> <

灰太狼/ 2022年11月03日 15:26/ 0 赞/ 139 阅读

相关手写浅拷贝深拷贝

递归浅拷贝 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Ym

迈不过友情╰/ 2022年09月15日 05:44/ 0 赞/ 216 阅读

相关 js 深拷贝函数

// 定义一个深拷贝函数接收目标target参数 function deepClone(target) { // 定义一个变量

淡淡的烟草味﹌/ 2022年09月08日 04:58/ 0 赞/ 148 阅读

相关手写JS系列-深拷贝

我们知道JS中数据类型分为基本数据类型和引用数据类型，基本数据类型之间的赋值是在内存中重新分配空间且保存着一样的值，而引用类型之间的赋值只是复制引用值，当原来对象中的属性值发生

分手后的思念是犯贱/ 2022年08月29日 00:26/ 0 赞/ 136 阅读

相关 js深拷贝浅拷贝

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

朱雀/ 2021年08月31日 14:35/ 0 赞/ 434 阅读