对象赋值，深拷贝与浅拷贝

最新推荐文章于 2024-05-24 23:45:01 发布

逸疏iiii

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量61

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_51771816/article/details/132508663

版权

文章目录

前言
一、对象赋值
二、浅拷贝
三.深拷贝

前言

本文章讲解了深拷贝，浅拷贝与对象赋值的区别

一、对象赋值

<!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>
 
</body>
<script>
let obj1 = {
    id:1,
    name:'lili',
    publicobj:{
         age:12,
         sex:1
    }
  }
  //对象赋值
let obj2 = obj1
obj2.id=2
obj2.name-'sisi'
obj2.publicobj.sex=0 


console.log(obj1);
console.log(obj2);

</script>
</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>
 
</body>
<script>
let obj1 = {
    id:1,
    name:'lili',
    publicobj:{
         age:12,
         sex:1
    }
  }
  //对象赋值
let obj2 = {};
for(const key in obj1) {
    obj2[key]=obj1[key]
}
console.log(obj1);
console.log(obj2);


</script>
</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>
 
</body>
<script>
let obj1 = {
    id:1,
    name:'lili',
    publicobj:{
         age:12,
         sex:1
    }
  }
  //对象赋值
let obj2 = {};
for(const key in obj1) {
    obj2[key]=obj1[key]
}
obj2.id=2
obj2.name='sssss'
obj2.publicobj.age=13


console.log(obj1);
console.log(obj2);


</script>
</html>

在这里插入图片描述
我们发现obj2的id和name发生改变，而obj1的并没有发生改变，但是他们的publicobj里面的age都发生了改变，这说明给了浅拷贝只拷贝值类型不拷贝引用类型，简单点来说，浅拷贝就是将值类型都给了另外一个对象供他使用，但是引用类型就没有给他，引用类型是他们两个公用的，不管谁修改引用类型的值他们两个里面的引用类型都会修改

三.深拷贝

深拷贝会将引用类型和值类型都给那个新的对象，不管是修改引用类型还是修改值类型都不会对我们给他值的那个对象造成影响，简单点来说就是将obj1中的所有东西全给obj2供他使用，并且那些东西已经给了obj2和obj1没关系了只是名字一样，东西不一样了

<!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>
 
</body>
<script>
let obj1 = {
    id:1,
    name:'lili',
    publicobj:{
         age:12,
         sex:1
    }
  }
  //对象赋值
  let obj2 = JSON.parse(JSON.stringify(obj1))
   obj2.id=3
   obj2.name-'ssqqqq'
   obj2.publicobj.age=666


   console.log(obj1);
   console.log(obj2);


</script>
</html>