美文网首页
JS深浅拷贝

JS深浅拷贝

作者: 云高风轻 | 来源:发表于2022-05-30 12:20 被阅读0次

1. 前言

1.很早之前写了纯文本的深浅拷贝

  1. 好不容易有空 改个 markdown版本的

2. 是什么 what

深浅拷贝理解,拷贝就是复制,js对引用类型数据的数据拷贝

浅拷贝 :由于引用类型数据是存在堆内存中,堆内存中存放的是引用类型的值,同时引用数据有会指针指向栈内存,浅拷贝的指针指向栈内存是一致的,所以一个改变另一个也会受影响。
深拷贝:是在堆内存开启新的空间存放数据。

简单理解就是:
如果拷贝产生新的数据就是深拷贝,
如果只是数据的引用,就是浅拷贝


3. 应用场景

react redux
table列表修改 弹出 表单


4. 第三方依赖

clone-deep


5. 栗子

let people = {name:'yzs',age:21,sex:true}

let obj = JSON.parse(JSON.stringify(test))

obj.name = 'yqq'

people.name  输出 'yzs'

哈哈是不是 so easy But 也有弊端

  1. 无法复制函数,正则
  2. 原型链没了,对象就是object,所属的类没了
  3. 循环引用的问题,没解决
  4. 当然jQ 的 extend函数也可以实现深复制,但是我目前jQ基本不用了

6.浅复制代码

let people = {name:'yzs', age:28}
// 调用
let shallowObj =s hallowCopy(people)
// 方法
shallowCopy = (obj)=>{
      var temp = {}
      for (const prop in obj){
         if(obj.hasOwnProperty(prop)){
              temp[prop] = obj[prop]
          }
    }
  return temp
}

只复制一层对象的属性,也就是说浅复制是对对象地址的复制,修改其中一个对象的属性,则另一个对象的属性也会随之改变,这就导致people.name和shallowObj.name指向同一块内存地址

影响

shallowObj.name = 'yqq'
people.name   结果也是'yqq' 而不是原来的'yzs'

7.深复制代码

let people = {name:'yzs', age:28}
// 调用
let shallowObj =deepCopy(people)
// 方法
deepCopy = (oldObj,newObj)=>{
    var newObj = newObj || {}
    for (const i in oldObj){
        if(typeof oldObj[i] ==='object'){
              if(oldObj[i] ===null){
                newObj[i] =null
              }else {
                if(oldObj[i].constructor === Array){
                newObj[i] = []
         }else {
            newObj[i] = {}
         }
    }
    deepCopy(oldObj[i],newObj[i])
}else{
    newObj[i] = oldObj[i]
   }
}
  return newObj
}

深复制会递归赋值对象所有层级,也就是说深复制会开辟新的栈,所以2个对象对象不同的地址,修改其中一个对象的属性,不会改变另一个对象的属性

不影响

shallowObj.name = 'yqq'

people.name   结果'yzs' 

8. 深拷贝的另类方式

  1. 将需要 深拷贝的 对象 进行JSON.stringify()序列化
  2. 在进行JSON.parse() 反序列化
  3. 缺点: 比如对象中不能存在循环引用

参考资料


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉

相关文章

  • JS文集的目录

    js基础心法 深浅拷贝(递归)深浅拷贝(首层浅拷贝) js 数据处理 数组对象查找的常见操作数组对象去重的常见操作...

  • js的深浅拷贝

    js的深浅拷贝可以分为数组的深浅拷贝和对象的深浅拷贝 一、数组的深浅拷贝如果只是简单的将数组中的元素付给另外一个数...

  • js深浅拷贝

    项目中,一般会用loadsh库,地址:https://github.com/lodash/lodash 浅拷贝方法...

  • js 深浅拷贝

    浅拷贝 是 把对象或者数组的第一层 key 或者 索引 赋到 新的 对象或者对象上 深拷贝是迭代浅拷贝的操作,也就...

  • js 深浅拷贝

    深拷贝 更好的写法: 浅拷贝 浅拷贝,还可以用 Object.assign 、展开运算符 ...

  • JS深浅拷贝

  • JS深浅拷贝

    JS存储方式 JS中存在基本数据类型和引用数据类型1.基本数据类型:number,string,boolean,n...

  • JS深浅拷贝

    浅拷贝 浅拷贝的意思就是只复制引用,而未复制真正的值。 深拷贝 深拷贝就是对目标的完全拷贝,不像浅拷贝那样只是复制...

  • JS 深浅拷贝

    START 番茄我又又又来写点啥啦。 最近敲代码,总是遇到需要修改数据,在前端展示。但是最后并不想修改原数据的情况...

  • JS 深浅拷贝

    https://blog.csdn.net/flyingpig2016/article/details/52895620

网友评论

      本文标题:JS深浅拷贝

      本文链接:https://www.haomeiwen.com/subject/yhjoprtx.html