解构赋值:解构代表分解数据结构,赋值指的是为变量赋值。
ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。
数组解构:
我们要将数组中的值解构出来,赋值给另外的变量,数组解构允许我们按照一一对应的关系从数组中提取值,然后把值赋值给变量。
简单代码示例:
// 此时=左边的[]不代表数组,代表的是解构
let [a,b,c] = [1,2,3]
console.log(a,b,c); // 输出1,2,3
// 相当于没有为c赋值
let [a,b,c] = [1,2]
// c的值为undefined
console.log(a,b,c); // 输出1,2,undefined
let [a,b,c,d] = [1,2,3]
// d的值为undefined
console.log(a,b,c,d); // 输出1,2,3,undefined
对象解构:
对象解构在=左边用{}表示,=右边是具体被解构的对象。
// 对象解构允许我们使用变量名匹配对象的属性,匹配成功会将对象的属性值赋值给变量
let {name,age} = {name:"sunny",age:22};
console.log(name,age); // 输出sunny 22
// 也可以事先创建好person对象,让后赋值给变量
let person = {uname:"Alice",uage:18};
let {uname,uage} = person;
console.log(uname,uage); // 输出Alice 18
// 另一种写法
// 用name属性匹配per中的name属性,匹配成功后将per中name的值赋值给name属性中的myName变量
// 在解构语法中:左边的name只用于属性匹配,:右边的myNmae才是真正的变量
let per = {name:"tutu",age:8,sex:"女"};
let {name:myName,age:myAge,sex:mySex} = per;
console.log(myName,myAge,mySex); // 输出tutu 8 女