JavaScript解构赋值
1. JavaScript解构赋值概念
JavaScript
的解构赋值是指通过模式匹配从数组
或对象
中提取值并将其分配给变量。
2. 数组解构
数组解构的格式:变量名放在一个[]
中,变量名之间用,
分隔。
- 当变量数大于数组元素个数时,多余的变量被初始化为
undefined
- 当变量数小于数组元素个数时,多余的数组元素舍弃
// a = '张三', b = '李四'
const [a, b] = ['张三', '李四'];
// a = '张三', b = '李四', 数组第三个元素被舍弃
const [a, b] = ['张三', '李四', '王五'];
// a = '张三', b = '李四', c = undefined
const [a, b, c] = ['张三', '李四'];
// ...三个点是解构符,等价于上面写法
const arr = ['张三', '李四', '王五'];
const [a, b, c] = [...arr];
3. 对象解构
对象解构就是把对象的属性名与变量名匹配,然后赋值。
- 属性名与变量名一致才可以赋值
- 不一致可以给变量重命名
对象解构的格式:变量名放在一个{}
中,变量名之间用,
分隔。
// 变量名必须与对象属性名一致,name = '张三', age = 18
const {name, age} = {name: '张三', age: 18}
// username: name 意思是变量username重命名为name
const {username: name, age} = {username: '张三', age: 18}
// ...三个点是解构符,等价于上面写法
const student = {
username: '张三',
age: 18
}
const {username, age} = {...student}
4. 数组对象解构
数组对象就是数组里的元素是对象类型。
数组对象解构的格式:变量名放在一个[{}]
中,变量名之间用,
分隔。
const [{name, age}] = [{name = '张三', age = 18}];
const student1 = {
username: '张三',
age: 18
}
const student2 = {
username: '李四',
age: 19
}
const student3 = {
username: '王五',
age: 20
}
const students = [student1, student2, student3]
const [{username: username1, age: age1}, {username: username2, age: age2}, {username: username3, age: age3}] = [...students]
5. 多级对象解构
多级对象就是对象里面包含对象。
const student = {
name: '张三',
age: 18,
family: {
father: '张大',
mother: '肉丝'
}
}
const {name, age, family: {father, mother}} = {...student}
ps:不管解构的对象多么复杂,我们只需要搞清楚它的结构,像俄罗斯套娃一样,用[]
和{}
进行嵌套即可。