学习记录：变量的解构赋值

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

1. 数组的解构赋值

//通过解构快速声明多个变量
const [a,b,c] =[20,'张三'，true]
a   // 20
b   //'张三'
c   // true

//对于已有的变量的解构则是
const arr = [10,20,30] 
const [a,c]=arr
a   // 10
c   // 20

//多维数组的解构赋值
const [a,b] = [20,[10,30]]
a   // 20
b   // [20,30]
const [d,[e,f] = [20,[10,30]]
d   // 20
e   // 10
f   // 30

//解构存在未定义元素的数组
const [a,b,c] = [ , , 20]
a  //undefined
b  //undefined
c  //20
const [ , , f] = [10, 20, 30]
f  //30

//  ...解构符号，代表的是除去前面结构的位数，剩余的形成一个新数组
const [a,b,...c] = [10,20,30,40,50,60]
a   // 10
b   // 20
c   // [30,40,50,60]
const [a,...b,c] = [10,20,30,40]   //这样会直接报错，因为...只能写在最后一位

总结：数组解构的关键是要注意变量的次序问题，变量与值是一 一对应的

2. 对象的解构赋值

//对象的解构要注意变量名与属性名的一致
const { bbb,aaa } = {aaa='20'，bbb='李四'}
bbb   // '李四'
aaa   // '20'
// 如果需求是变量名与属性名不一致，那么就可以写完整的解构语法，此时的name和age代表的是匹配模式
const { name:bbb, age:aaa} = {aaa='20'，bbb='李四'}
name   // '李四'
age    // '20'
------------------------------------------
const {name，age} = {name：'张三'，aaa:'20'}
name   //'张三'
age    //undefined
解构对象中不存在的属性会显示 undefined
const {name:bbb} = {}
name   //error name is not undefined
在匹配模式下匹配不存在的属性，会报错 

// 解构嵌套结构的对象
const {data , p} = {
data : 20,
p:{name:'张三',p:'1111'}
}
data  //20
p     //{name:'张三',p:'1111'}
------------------------------------------
const {data , p:{p，name}} = {
data : 20,
p:{name:'张三',p:'1111'}
}
data  //20
p     //'11111'
naem  //'张三'

想要解构嵌套内部的属性或方法，一定要加上匹配模式，模式名要与嵌套的方法名一致

3. 字符串的解构赋值

const [a,b,c] = 'HELLO'
a  // 'H'
b  // 'E'
c  // 'L'
//字符串的解构可以看成一个数组操作