js中深浅拷贝的理解

最新推荐文章于 2023-12-15 00:10:20 发布

花花(*^_^*)

最新推荐文章于 2023-12-15 00:10:20 发布

阅读量540

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_41754012/article/details/131362727

版权

1.什么是拷贝

拷贝通俗点理解就是我们有一组数据，想获取到一组一摸一样的数组。就把原来的数据拷贝到一个新的对象里面。

在js中我们有两种数据类型，一种是基本数据类型，一种复杂数据类型。在js中，拷贝也分为两种，一种是浅拷贝，一种是深拷贝。

2.浅拷贝

创建一个新的对象，去拷贝另一个对象的属性和属性值。如果是基础类型的数据就直接拿来用，如果是复杂数据类型的，只是复制的是地址。浅拷贝只拷贝第一层的属性和属性值

浅拷贝的三种办法

第一种

myobj1 ={name:'xiaoming'}
       //创建一个新对象
       myobj2={}
       for(var i in myobj1){
      myobj2[i]=myobj1[i]
     }
     console.log(myobj2);

第二种：利用Object.assign()合并对象

myobj1 ={name:'xiaoming'}
       //创建一个新对象
      let myobj2 ={}
      Object.assign(myobj2,myobj1)
      console.log(myobj2);

第三种：利用展开运算符

 myobj1 ={name:'xiaoming'}
       //创建一个新对象
      let myobj2 ={...myobj1}
      console.log(myobj2);

3.深拷贝

创建一个新的对象，去拷贝另一个对象的属性和属性值如果属性值是对象类型，就创建一个新的对象，拷贝这个属性值。依次类推把对象所有深层次的属性值都拷贝一遍。

通过上述描述我们很容易想到递归函数，现在我们用递归实现一个深拷贝，这里要注意递归函数需要一个临界条件跳出循环。

第一种：递归拷贝

var obj1={name:'小黑',location:{city:'henan',province:'zhengzhou'}}
    var obj2={}
    function deepCopy(o2,o1){//o1指的是obj1的参数，o2指的是obj2的参数
        for(var i in o1){
        o2[i]=o1[i]
        if(o1[i]?.toString()==='[object Object]'){
        o2[i]={}
        deepCopy(o2[i],o1[i])
        }else if(Object.prototype.toString.call(o1[i])==='[object Array]'){
        o2[i]=[]
        deepCopy(o2[i],o1[i])
        }
        else{
            o2[i]=o1[i]
        }
        } 
    }
    deepCopy(obj2,obj1)
    console.log(obj2);

第二中使用JSON.stringify()和JSON.parse()

var obj1={name:'小黑',location:{city:'henan',province:'zhengzhou'}}
      var obj2 =JSON.parse(JSON.stringify(obj1))
      console.log(obj2);

在这里需要注意参数不能是undefined ,函数。

如果拷贝的对象存在循环引用的话就会报错。

第三种：使用第三库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>
<body>
    <script>
     var obj1={name:'小黑',location:{city:'henan',province:'zhengzhou'}}
     let obj2 = _.clone(obj1);
     console.log(obj2);
    </script>
</body>
</html>

花花(*^_^*)

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js中深浅拷贝的理解

拷贝通俗点理解就是我们有一组数据，想获取到一组一摸一样的数组。就把原来的数据拷贝到一个新的对象里面。在js中我们有两种数据类型，一种是基本数据类型，一种复杂数据类型。在js中，拷贝也分为两种，一种是浅拷贝，一种是深拷贝。
复制链接

扫一扫