知道解构的语法及分类，使用解构简洁语法快速为变量赋值。

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法，如下代码所示：
解开数据结构赋值给变量==>快速取值

  1. <script>
  2.   // 普通的数组
  3.   let arr = [1, 2, 3];
  4.   // 批量声明变量 a b c 
  5.   // 同时将数组单元值 1 2 3 依次赋值给变量 a b c
  6.   let [a, b, c] = arr;
  7.   console.log(a); // 1
  8.   console.log(b); // 2
  9.   console.log(c); // 3
  10. </script>

课堂代码：

  1. // 解构赋值
  2. // 解：解开、展开
  3. // 构：结构  ------------ JS中，有结构的数据类型：数组、对象
  4. // 赋值：把值赋值给变量
  6. // 解构赋值：把数组 或者 对象，展开，将里面的值取出，赋值给一些变量
  8. // let arr = ['张飞', '李逵', '老段']
  9. // let a = arr[0]
  10. // let b = arr[1]
  11. // let c = arr[2]
  13. // ------------------ 演示基本的数组解构赋值 -------------------
  14. // let [a, b, c] = ['张飞', '李逵', '大飞哥']
  15. // console.log(a, b, c)
  18. // -------------------- 数组解构赋值的细节问题 ----------------
  19. // let [a, b, c] = ['张飞', '李逵', '大飞哥', '老段', '秋姐']
  20. // console.log(a, b, c)
  22. // let [a, b, c, d] = ['张飞', '李逵']
  23. // console.log(a, b, c, d)
  25. // let [a, b, ...c] = ['张飞', '李逵', '大飞哥', '老段', '秋姐']
  26. // console.log(a, b, c) // 张飞 李逵 ['大飞哥', '老段', '秋姐']
  28. // let [, , a, b] = ['张飞', '李逵', '大飞哥', '老段', '秋姐']
  29. // console.log(a, b)
  31. // let [a, b, [c, d], [e, f]] = [3, 5, [2, 1], [4, 8]]
  32. let [, , [c], [, f]] = [3, 5, [2, 1], [4, 8]]
  33. console.log(c, f)

总结：

  1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
  2. 变量的顺序对应数组单元值的位置依次进行赋值操作
  3. 变量的数量大于单元值数量时，多余的变量将被赋值为 undefined
  4. 变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位
  5. 允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析

4.2 对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法，如下代码所示：

  1. <script>
  2.   // 普通对象
  3.   let user = {
  4.     name: '小明',
  5.     age: 18
  6.   };
  8.   // 批量声明变量 name age
  9.   // 同时将数组单元值 1 2 3 依次赋值给变量 a b c
  10.   let {name, age} = user;
  12.   console.log(name); // 小明
  13.   console.log(age); // 18
  14. </script>

课堂代码：

  1. // ----------------- 基本的解构 ----------------
  2. // let { id, name, age } = { id: 1, name: 'zs', age: 30 }
  3. // console.log(id, name, age)
  5. // ----------------- 细节问题 --------------------
  6. // let { id, name, nianling } = { id: 1, name: 'zs', age: 30 }
  7. // console.log(id, name, nianling) // 1 'zs' undefined // 要求变量的名字，必须和对象的键一样才能解构
  9. // let { age, id, name } = { id: 1, name: 'zs', age: 30 }
  10. // console.log(id, name, age) // 变量的顺序不做要求
  13. // let name = '老段'
  14. // let { age, id, name: xingming } = { id: 1, name: 'zs', age: 30 }
  15. // console.log(id, xingming, age) // 通过 ”name:xingming” 这样的语法，给新变量改个名字
  18. let person = {
  19.   name: '老段',
  20.   age: 30,
  21.   dog: {
  22.     name: '旺财',
  23.     age: 3
  24.   }
  25. }
  27. // let { dog: { name, age } } = { name: '老段', age: 30, dog: { name: '旺财', age: 3 } }
  28. let { dog: { name, age } } = person
  29. console.log(name, age)
  31. // let { name, age } = person.dog
  32. // console.log(name, age)

总结：

  1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
  2. 对象属性的值将被赋值给与属性名相同的变量
  3. 对象中找不到与变量名一致的属性时变量值为 undefinedsexa
  4. 允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效

注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析