ES6 解构赋值的详细说明，建议给为前端收藏！

Posted 2022-07-29 FungLeo

ES6 解构赋值的详细说明，建议给为前端收藏！

相较于常规的赋值方式,解构赋值最主要的是’解构’两个字,在赋值的过程中要清晰的知道等号右边的结构.

先简单地看一下原来的赋值方式.

var a=[1,2]　　

分析一下这句代码的几个点:

(1)变量申明和赋值

/*
  你可以理解这两个操作是分开的,虽然是一句代码.
  声明变量都会出现变量名的提升(也就是是声明变量的这句代码会被提升到生效作用域的最前面),
  区别在于'var'声明的是全局变量,而'let const'声明的是块级作用域变量.
*/
var a;
a=[1,2]

(2)结构对应

var a;
a=[1,2];
a=12;   
a=name:'小明',age:18

解构赋值

结合上面的的例子,假如我现在只想要 name:'小明',age:18 这个对象中的 'name' 属性,原来的做法

var a=name:'小明',age:18
console.log(a.name)

就需要通过点语法去获取,实际开发中,我们的数据很多时候是嵌套很多层的,所以就会出现类似 a.b.c.d 这类代码.看着让人头晕,而解构赋值就是解决这个问题的方案之一

基本用法

(1)声明和赋值

数组

let [a] = [1];

对象

let name = name:'小明',age:18

变量名: 变量名必须是对象中的属性名

(2)结构对应(重难点)

数组(要位不要名)

对象(要名不要位)

完全解构

数组:

a:按顺序

let [a, b, c] = [1, 2, 3];
console.log(a,b,c)
//1,2,3

这样赋值的语义是我知道右边是一个有三个元素的数字,所以我声明了一个数组,三个元素分别是a,b,c和右边的三个元素对应.所以a=1,b=2,c=3

b:打乱顺序

let [a, c, b] = [1, 2, 3];
console.log(a,b,c)
//1,3,2

因为三个变量的位置变了,所以其对应的元素(值)也就变量

对象:

a:按顺序

let name,age =name:'小明',age:18
console.log(name,age)
//小明,18

b:打乱顺序

let age,name =name:'小明',age:18
console.log(name,age)
//小明,18

虽然变量的声明前后顺序变了,但是对象中的值没变,它最终还是根据属性名去找值,所以结果没变

c:不存在的属性名

let name,sex =name:'小明',age:18
console.log(name,sex)
//小明,undefined

嵌套解构

数组:

let [a, [b,c], d] = [1, [2, 3], 4];
console.log(a,b,c,d)
//1,2,3,4<br>//反正结构和位置一一对应就行了.

对象

const obj=
    man:
      student:
           name:'小明',
           age:18
        
   

 
let man:student = obj
//obj里面有个man,然后里面有个student,注意这一行代码里变量就只有一个student,并没有man
console.log(man,student)
// undefined,name:'小明',age:18
let man:student:name = obj
//同理,逐层拿到最后的name值,而且也只有name这一个属性
console.log(name)
//小明
 
//如何同时拿到嵌套的每层的数据
let man,man:studengt,man:student:name = obj
console.log(man,student,name)
//student:name:'小明',age:18,name:'小明',age:18,18

不完全解构

let [a, b] = [1, 2, 3];
 
console.log(a,b,c)
//1,2
//这里变量只有两个,但是数组中元素有三个.这里还是根据位置对应原理就行.a表示数组中的第一个元素,b表示第2个.而第三个元素我不要.
 
let [a, [b], d] = [1, [2, 3], 4];
console.log(a,b,d)
//1,2,4
//嵌套解构同样也可以不完全解构,根据实际需要,需要哪个就解构赋值哪个
let [, , c] = [1, 2, 3];
console.log(c)
//3
//注意这里是完全解构,只不过前两个元素我虽然解构了,但是我不要.因为位置对应的关系,所以必须有两个占位的,才能拿到第三个.
//放在这里是为了方便理解为啥前面两个明明不要还得写两个','

超量赋值(自己瞎编的词)

let [a,b,c,d] = [1,2,3]
onsole.log(a,b,c,d)
 
//1,2,3,undefined
//因为前三个元素都能对应找到,而第四个找不到,但是已经声明了,没有值.
//对象同理,如果出现了对象中没有的属性就会得到undefined

(3)重命名(先取再重命名)

数组:我们上面说过,数组解构的时候只要注意位置对应就行了,名称啥的无所谓,你喜欢叫什么变量名就什么变量名

对象:对象解构的时候是要属性名对应才能取到值.但是没有说取到值之后不能重命名啊.一定要取到值之后在命名

let name:myName,age =name:'小明',age:18
// 这里name:myName的意思是:取到name属性值,冒号后面的变量名没有花括号,
// 意思是把我取到的值交给冒号后面的变量名,即'myName'.
// 相当于把name变量重命名为myName
// 而student:name,同样是'属性名:'意思一样,取里面对应的属性,
// 冒号后面还有花括号,所以再解构,取student里面的name属性
console.log(name,myName,age)
//undefined,小明,18

(4)默认值(先取再默认)

数组

let [a=0, b=0,c=10] = [1, 2];
console.log(a,b,c) //1,2,10
 
// 这里a,b,c在左边都先给了个默认值,但是这里是超量解构,a和b都成功取到值,
// 但是c没取到,所以最终是默认值10,如果没有默认值就是undefined

对象

let name:sex='男' =name:'小明',age:18
console.log(sex)  //小明
let name:sex='男' = name:'小明',age:18
console.log(sex)  //男
 
// 这里刚好通过这两个例子区分一下重命名和嵌套

(5)字符串解构

字符串的解构可以理解为一维数组的解构,这在处理字符串的时候特别方便.

let [a,b,c] ='123'
console.log(a,b,c,typeof c)
// 1,2,3,string   解构出来的是字符类型的数据

长度

let length:s ='123'
console.log(s,typeof s) // 3,number 
 
// 同理,数组也有长度
let length:s = [1,2,3]
console,log(s,typeof s) // 3,number

(6)函数参数自动解构

function look([x,y])
  console.log(x,y)

 
look([1,2]) // 1,2

参数默认值陷阱单独再写一篇

(7)先声明再赋值(少用)

数组

let a;
let b;
[a,b]=[1,2]
console.log(a,b) //1,2

对象

let x;
x=x:1,y:1
// 报错 主要还是大括号的原因,js在行首遇到会把它当做代码块执行,所以会报错.
(x=x:1,y:1)
// 这样可以解决问题,但是尽量别引入(),问题会变得复杂

到这里为止,解构赋值的日常使用没问题了,它带来了不少方便,但也会产生一些新bug,比如:let data =res 的写法,假如res里面并没有data属性,那就会undefined,所以还是得明确等号右边的解构.

转载说明

今天遇到了一个解构赋值重命名的问题，忘记咋写了。。。于是搜索到了这篇文章，作者写得非常好。非常感谢！

但是原文排版比较乱，因此我重新排版并转发到我自己的博客上了。

对比而言，现在的大多数的博客博文的质量很不理想，很多人都是直接复制一段代码取个标题就走了。我希望能有更多的人，能够整理各种详细的知识点的博文，只有这样，才能让我们走得更远，知识获取更加容易。

再次对原文作者表示致敬！

原文链接：https://www.cnblogs.com/Shyno/p/12156854.html