解构赋值
ES6中允许从数组中提取值,按照对应位置,对变量赋值。
对象也可以实现解构。
数组解构
let arr = [1, 2, 3]
let [a, b, c] = arr
或者
//数组解构允许我们按照一一对应的关系从数组中提取值,然后将值赋值给变量
let [a, b, c] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
数组解构允许我们按照一一对应的关系从数组中提取值(严格按照顺序来),然后将值赋值给变量
-
等号右边是数组 数组中有3个值
-
等号左边不是数组 代表解构 中括号里写的实际是变量的名字 代表从数组当中提取值
-
中括号中的变量和右边数组中的值 实际上是一一对应的关系
比如 a变量的值是1 b=2 c=3 -
中括号前面的let代表 中括号中的变量是使用let关键字声明的
如果变量的数量 和 值的数量 不一致 值会变为undefined
//如果变量的数量 和 值的数量 不一致 值会变为undefined
//let [foo] = [];
//console.log(foo);//undefined
let [bar, foo] = [1];
console.log(bar); //1
console.log(foo); //undefined
对象解构
数组的元素是按次序排列的,变量的取值由它的位置决定。而对象的属性没有次序,变量必须与属性同名,才能取到正确的值
//对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
let person = {
name: 'user',
age: 20
};
let {
name,
age
} = person;
console.log(name); //user
console.log(age); //20
对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量。
- 对象解构 在等号的左边用大括号{ }表示,大括号中依然写的是变量的名字
- 在等号的右边 要写具体被解构的对象
- 对象解构 实际上是属性匹配 变量的名字匹配对象中属性的名字
- 如果匹配成功 就将对象中属性的值 赋值给变量
另一种写法
在对象的解构语法中,等号左侧大括号里的语法可以写成和对象一样
在这种情况下,大括号里,冒号左边的属性 用来匹配 对象当中的属性
冒号右边的才是真正的变量
如果属性匹配成功 则将对象中属性对应的值 赋值给左侧的变量
let {
name: myName,
age: myAge
} = person;
console.log(myName); //user
console.log(myAge); //20