解构赋值是ES6(ECMAScript 2015)引入的一个特性,它允许我们可以快速取出数组或者对象中的值并赋值给新的变量。

const a = {
      name: 'name',
      age: 18,
      marriage: false,
    }

let { name, age, marriage} = a;
console.log(name, age, marriage) // 打印信息:name 18 false

明确一下深拷贝和浅拷贝的定义

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

基本数据类型,直接用等号赋值,也都是深拷贝

引用类型,直接用等号赋值,是浅拷贝

回到解构赋值,使用如下示例代码

const a = {
      name: 'name',
      age: 18,
      marriage: false,
    }

let { name, age, marriage} = a;

name = 'name1';
age = 20;
marriage = true;
console.log(a)

 我们会发现 name, age, marriage 的改变没有修改原对象的值
修改一下上述的代码

const a = {
      name: 'name',
      age: 18,
      marriage: false,
      addr: { province: 'sichuan', city: 'chengdu' }
    }

let { name, age, marriage, addr } = a

name = 'myname'
age = 26
marriage = true
addr.province = 'shanghai'
addr.city = 'shanghai'

console.log(name, age, marriage, addr) 
console.log(a)

 此时我们发现, 对象 a 属性 addr 的值被结构所得的 addr 所影响

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

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

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

posted on 2024-09-30 10:11  XiSoil  阅读(11)  评论(0编辑  收藏  举报