前端ES6结构赋值详解大全

ES6结构赋值

1.基础铺垫(传统赋值取值方式)

var a = [1,2]
var person = {name:"fanfusuzi",sex:"man"}
1
2

(1)变量的申明和赋值:

可以理解上面的代码分为这两步: var a; a=[1,2]  
因为声明变量都会出现变量名的提升(声明变量这句代码会被提升到生效作用于最前面)
var声明的是全局变量，而let const声明的是块级作用域
1
2
3

(2)以往传统的取值方式

 数组按照值的所在位置进行取值，eg:a[0]、a[1]
 对象按照属性的名字进行取值：eg: person.name、person.sex
1
2

(3)为什么会出现结构赋值

实际的开发中后台传的值是嵌套很多层的，
按照传统的方式进行取值会让人很难受,eg: a.b.c.d.n
1
2

2.结构赋值

相较于常规的赋值方式,结构赋值最主要的是’解构’两个字,在赋值的过程中要清晰的知道等号右边的结构，解构顾名思义就是:解开结构
(1)语法:

数组: let [a] =[1]   [变量名]:变量名可随意
对象: let {name} = {name}  {变量名}:变量名必须是对象中的属性名
1
2

(2)结构对应:

口诀:数组(要位不要名), 对象(要名不要位)

(3)完全结构

数组:

按顺序： let [a,b,c] = [1,2,3]; console.log(a,b,c); //1,2,3
打乱顺序: let [b,a,c] = [1,2,3]; console.log(a,b,c); //2,1,3
数组的是按照位置来进行结构的，所以与变量名字无关
1
2
3

对象:

按顺序： let {name,sex} = {name:"fanfusuzi",sex:"man"}; console.log(name,sex); //fanfusuzi,man
打乱顺序: let {sex,name} = {name:"fanfusuzi",sex:"man"}; console.log(sex,name); //nan,fanfusuzi
对象是按照属性名字进行结构的，所以与变量的位置无关
不存在的属性名： let {name,age} = {name:"fanfusuzi",sex:"man"}; console.log(name,age); 
1
2
3
4

(4)嵌套结构
数组

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

对象

const obj={
    man:{
      student:{
           name:'ning',
           age:18
        }
   }
}
 
let {man:{student}} = obj //obj里面有个man,然后里面有个student,注意这一行代码里变量就只有一个student,并没有man
console.log(man,student) // undefined,{name:'ning',age:18}
let {man:{student:{name}}} = obj //同理,逐层拿到最后的name值,而且也只有name这一个属性
console.log(name) //ning
 
//如何同时拿到嵌套的每层的数据
let {man,man:{studengt},man:{student:{name}}} = obj
console.log(man,student,name) //{student:{name:'ning',age:18}},{name:'ning',age:18},18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

(5)不完全结构

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

(6)重命名(先取再重命名)
数组:我们上面说过,数组解构的时候只要注意位置对应就行了,名称啥的无所谓,你喜欢叫什么变量名就什么变量名
对象:对象解构的时候是要属性名对应才能取到值.但是没有说取到值之后不能重命名啊.一定要取到值之后在命名

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

(7)默认值(先取再默认)
数组:

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
1
2
3

对象:

let {name:sex='男'} ={name:'ning',age:18}
console.log(sex)  //ning  取到了name值并且重命名为sex然后默认值为男
let {name:{sex='男'}} = {name:'ning',age:18}
console.log(sex)  //男
//这里刚好通过这两个例子区分一下重命名和嵌套
1
2
3
4
5

3.字符串结构

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

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
1
2
3
4
5
6
7

4.函数参数自动结构

function look([x,y]){
console.log(x,y)
}
look([1,2]) //1,2
1
2
3
4

转载

博主

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！