概述
解构赋值是对赋值运算符的扩展。
这是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
对象解构
什么是解构？
const user = {
name: "li",
age: 11,
sex: "男",
address: {
city: "广东"
}
}
let name, age, sex, address;
name = user.name;
age = user.age;
sex = user.sex;
address = user.address;
console.log(age); // 11
使用ES6的一种语法规则，将一个对象或数组的某个属性提取到某个变量中。
const user = {
name: "li",
age: 11,
sex: "男",
address: {
city: "广东"
}
}
// 解构
// let name, age, sex, address;
// ({name, age, sex, address} = user);
// console.log(name, age, sex, address); // li 11 男 {city: "广东"}
// 简写为
// 先定义4个变量，然后从对象中读取同名属性，放到变量中
let {name, age, sex, address} = user;
console.log(name, age, sex, address); // li 11 男 {city: "广东"}
解构不会对被解构的目标造成任何影响
const user = {
name: "li",
age: 11,
sex: "男",
address: {
city: "广东"
}
}
// 解构
// 先定义2个变量: name, city
// 再解构
let {name, address: {city}} = user;
console.log(name, city); // li 广东
在解构中使用默认值
{同名变量 = 默认值}
const user = {
name: "li",
age: 11,
sex: "男",
address: {
city: "广东"
}
}
// 解构
// let name, age, sex, address;
// ({name, age, sex, address} = user);
// console.log(name, age, sex, address); // li 11 男 {city: "广东"}
// 简写为
let {name, age, sex, address, abc ="123"} = user;
console.log(name, age, sex, address, abc); // li 11 男 {city: "广东"} 123
非同名属性解构
{属性名: 变量名}
const user = {
name: "li",
age: 11,
sex: "男",
address: {
city: "广东"
}
}
// 解构
// let name, age, sex, address;
// ({name, age, sex, address} = user);
// console.log(name, age, sex, address); // li 11 男 {city: "广东"}
// 简写为
// 先定义5个变量: name, age, gender, address, abc{而且给abc赋一个默认值"123"}
// 再从对象user中读取同名属性赋值 {其中gender读取的是sex属性}
let {name, age, sex: gender, address, abc ="123"} = user;
console.log(name, age, gender, address, abc); // li 11 男 {city: "广东"} 123
数组解构
const arr = ["1", "2", "3"];
const {0: a, 2: b} = arr;
console.log(a, b); // 1 3
const arr = ["1", "2", "3"];
// let a, b;
// ([a, , b] = arr);
const [a, , b] = arr;
console.log(a, b); // 1 3
