ES6 structure assignment
1. Basic paving (traditional value assignment method)
var a = [1,2]
var person = {
name:"fanfusuzi",sex:"man"}
(1) Declaration and assignment of variables:
可以理解上面的代码分为这两步: var a; a=[1,2]
因为声明变量都会出现变量名的提升(声明变量这句代码会被提升到生效作用于最前面)
var声明的是全局变量，而let const声明的是块级作用域
(2) The traditional value method in the past
数组按照值的所在位置进行取值，eg:a[0]、a[1]
对象按照属性的名字进行取值：eg: person.name、person.sex
(3) Why does structure assignment occur?
实际的开发中后台传的值是嵌套很多层的，
按照传统的方式进行取值会让人很难受,eg: a.b.c.d.n
2. Structure assignment
Compared with the conventional assignment method, the most important thing in structure assignment is the word'deconstruction'. In the process of assignment, you must clearly know the structure on the right side of the equal sign. Deconstruction, as the name implies, is: untie the structure.
(1) Grammar:
数组: let [a] =[1] [变量名]:变量名可随意
对象: let {name} = {name} {变量名}:变量名必须是对象中的属性名
(2) Structure correspondence:
Mantra:Array (no name or name), object (no name or name)
(3) Complete structure
array:
按顺序： 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); //1,2,3
数组的是按照位置来进行结构的，所以与变量名字无关
Object:
按顺序： 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); //fanfusuzi,undefined
(4) Nested structure
array
let [a, [b,c], d] = [1, [2, 3], 4];
console.log(a,b,c,d)
//1,2,3,4
//结构和位置一一对应就行了.
Object
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
(5) Incomplete structure
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
(6) Double naming (pre-emptive re-high naming)
Array: As we said above, you only need to pay attention to the position correspondence when the array is deconstructed. The name does not matter. The variable name you like is the variable name
object: when the object is deconstructed, the attribute name must correspond to the attribute name to get the value. But It doesn’t say that you can’t rename it after you get the value. Be sure to name it after you get the value
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
(7) Default value (take first and then default)
array:
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
Object:
let {
name:sex='男'} ={
name:'ning',age:18}
console.log(sex) //ning 取到了name值并且重命名为sex然后默认值为男
let {
name:{
sex='男'}} = {
name:'ning',age:18}
console.log(sex) //男
//这里刚好通过这两个例子区分一下重命名和嵌套
3. String structure
The deconstruction of a string can be understood as the deconstruction of a one-dimensional array, which is particularly convenient when dealing with strings.
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
4. Automatic structure of function parameters
function look([x,y]){
console.log(x,y)
}
look([1,2]) //1,2