ES6的解构赋值是深拷贝or浅拷贝?

• 阅读 2249

面试时候有面试官问到ES6的解构赋值是深拷贝还是浅拷贝?,这里做一个总结.

ES6的解构赋值,大家应该都清楚,就是可以快速取出数组或者对象中的值;我们先来看一个使用案例:

ES6的解构赋值是深拷贝or浅拷贝?

更多的解构赋值知识可以查看: https://es6.ruanyifeng.com/#docs/destructuring

那么,ES6的解构赋值到底是深拷贝还是浅拷贝呢?

我们先来看一下深拷贝和浅拷贝的定义

深拷贝:修改新变量的值不会影响原有变量的值。默认情况下基本数据类型(number,string,null,undefined,boolean)都是深拷贝。

浅拷贝:修改新变量的值会影响原有的变量的值。默认情况下引用类型(object)都是浅拷贝。

我们先开看一个基本类型,直接用等号赋值的例子

let user = 'siri'
let stu = user
stu = 'jack'
console.log('输出:',stu)
// 输出:jack
console.log('输出:',user)
// 输出:siri

由上方的例子可以知道: stu的数值改变并不会影响user ,所以基本数据类型,直接用等号赋值,也都是深拷贝;

我们再看一个引用类型,直接用等号赋值的例子

let obj1 = {
  name:'siri',
  age:18
}
let obj2 = obj1

obj2.name = 'jack'
console.log('obj1',obj1)
console.log('obj2',obj2)
// obj1 {name: "jack", age: 18}
// obj2 {name: "jack", age: 18}

ES6的解构赋值是深拷贝or浅拷贝?

上方例子中我们可以看到,obj1赋值给obj2,然后改变obj2中的name值,发现obj2中的name也跟随着改变了,所以是浅拷贝。(因为他们引用的是同一个地址的数据!拷贝的时候并没有给obj2创造独立的内存,只是把obj1指向数据的 指针 拷贝给了obj2)

上方的例子了解了之后 我们再回到解构赋值

修改最上方的解构赋值代码,给name 和 age赋值

const userInfo = {
   name:'siri',
  age:18
}
let {name,age} = userInfo
name = 'jack'
age = 16
console.log('打印userInfo',userInfo)
// 打印userInfo {name: "siri", age: 18}

我们发现userInfo 的数据并没有被改变,有同学会说,解构赋值好像是深拷贝啊????? ES6的解构赋值是深拷贝or浅拷贝?

我们再修改一下代码看看

const userInfo = {
    name:'siri',
    age:18,
    detail:{
        qq:'1',
        email:'1366666@163.com'
    }
}
let {name,age,detail} = userInfo
name = 'jack'
age = 16
detail.qq = "2"
console.log('打印userInfo',userInfo)

打印信息:

ES6的解构赋值是深拷贝or浅拷贝?

发现解构赋值出来的对象将原对象detail中的qq的数据修改了,这样看还是浅拷贝;

###总结:

  • 解构赋值,如果所解构的原对象是一维数组或对象,其本质就是对基本数据类型进行等号赋值,那它就是深拷贝;

  • 如果是多维数组或对象,其本质就是对引用类型数据进项等号赋值,那它就是浅拷贝;

结论:解构赋值是浅拷贝(因为它确实不能对多维数组或对象达到深拷贝的作用);

深拷贝的实现方法

本质还是将对象拆开为基本数据类型进行赋值。

function deepClone(source){
  const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
  for(let keys in source){ // 遍历目标
    if(source.hasOwnProperty(keys)){
      if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象,就递归一下
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = deepClone(source[keys]);
      }else{ // 如果不是,就直接赋值
        targetObj[keys] = source[keys];
      }
    }
  }
  return targetObj;
}
点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
1个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。 language JavaScript "name": "vuecliversion2", "version": "1.0.0", "desc
放学路上 放学路上
1年前
python 赋值引用 浅拷贝 深拷贝
一、基础概念1、直接赋值:其实就是对象的引用(别名)。2、浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象。3、深拷贝(deepcopy): copy 模块的 deepcopy 方法,完全拷贝了父对象及其子对象。二、代码示例import copya [1, 2, 3, 4, ['a', 'b']] 原始对象 b a
小森森 小森森
1个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本 欢迎添加左边的微信一起探讨!项目地址:](https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n) \2. Bug修复更新日历 2. 情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意), \ \ 和 注意
仔细看看,会有收获。js深浅拷贝
好好理解深浅拷贝和赋值(针对引用类型)赋值:两个对象指向同一内存地址。结果,无论是修改基本类型还是引用类型,两个对象的值都会改变。浅拷贝:两个对象指向不同的内存地址,但是他们中的引用类型数据指向同一内存地址。结果,修改引用类型,两个对象的值都会改变;修改基本类型,互不影响。深拷贝:两个对象指向不同的内存地址,他们中的引用类型也指向不同的内存地址。结果,均互不
Wesley13 Wesley13
1年前
java 复制Map对象(深拷贝与浅拷贝)
java 复制Map对象(深拷贝与浅拷贝) --------------------- CreationTime--2018年6月4日10点00分 ----------------------------- Author:Marydon -------------- ### 1.深拷贝与浅拷贝   浅拷贝:只复制对象的引用,两个引用仍然指向同一个对象
Wesley13 Wesley13
1年前
Java深拷贝和浅拷贝
1.浅复制与深复制概念 ----------- ⑴ 浅拷贝(浅克隆)       复制出来的对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象。 ⑵ 深拷贝(深克隆)       复制出来的所有变量都含有与原来的对象相同的值,那些引用其他对象的变量将指向复制出来的新对象,而不再是原有的那些被引用的对象。换言之,深复制
Wesley13 Wesley13
1年前
java克隆之深拷贝与浅拷贝
版权声明:本文出自汪磊的博客,未经作者允许禁止转载。 ========================== Java深拷贝与浅拷贝实际项目中用的不多,但是对于理解Java中值传递,引用传递十分重要,同时个人认为对于理解内存模型也有帮助,况且面试中也是经常问的,所以理解深拷贝与浅拷贝是十分重要的。 **一、Java中创建对象的方式** ①:与构造方法有关
Wesley13 Wesley13
1年前
ES6新语法(二)
**1.解构** **在ES6中,可以使用**解构**从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量。** **解构:自动解析数组或对象中的值,并赋值给指定的变量。、** **1.1****数组解构** var arr = [3,4,5]; var [a, b, c] = arr;
Stella981 Stella981
1年前
JavaScript基础心法——深拷贝和浅拷贝
![](https://oscimg.oschina.net/oscnet/c131215a5aaaeb7909d7398688df6ea6dcd.png) 浅拷贝和深拷贝都是对于 JS 中的引用类型而言的,浅拷贝就只是复制对象的引用,如果拷贝后的对象发生变化,原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。 前言 -- 说到深浅拷贝,必须先
Java对象拷贝原理剖析及最佳实践
作者:宁海翔 ### 1 前言 对象拷贝,是我们在开发过程中,绕不开的过程,既存在于Po、Dto、Do、Vo各个表现层数据的转换,也存在于系统交互如序列化、反序列化。 Java对象拷贝分为深拷贝和浅拷贝,目前常用的属性拷贝工具,包括Apache的