第五讲_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：不管解构的对象多么复杂，我们只需要搞清楚它的结构，像俄罗斯套娃一样，用[]和{}进行嵌套即可。