正常情况下，

  1. const obj = {
  2.   a: 1,
  3.   b: 2,
  4. };
  5.  
  6. const { a, b } = obj;
  7. console.log(a, b); // 1 2

当被解构字段缺失时，

  1. const obj = {
  2.   a: 1,
  3. };
  4.  
  5. const { a, b } = obj;
  6. console.log(a, b); // 1 undefined

此时可在解构时使用 = 指定默认值：

  1. const obj = {
  2.   a: 1,
  3. };
  4.  
  5. const { a, b = 2 } = obj;
  6. console.log(a, b); // 1 2

你甚至可以在解构字段的同时为其重命名，

  1. const obj = {
  2.   a: 1,
  3.   b: undefined
  4. }
  5.  
  6. const { a, b: c = 2 } = obj;
  7. console.log(a, c) // 1 2

上述过程其实为：

  • 创建变量 c
  • 获取 obj.b 并赋值给 c
  • 如果 obj.b 为 undefined，则将指定的默认值 2 赋值给 c

上面的过程等同于：

  1. const c = obj.b || 2

考察如下的对象：

  1. const obj = {
  2.   innerObj: {
  3.     a: 1,
  4.     b: 2
  5.   }
  6. }

正常情况下可通过如下的形式解构以得到内层的字段：

  1. const obj = {
  2.   innerObj: {
  3.     a: 1,
  4.     b: 2,
  5.   },
  6. };
  7.  
  8. const {
  9.   innerObj: { a, b = 2 },
  10. } = obj;
  11.  
  12. console.log(a, b); // 1 2

但如果里面嵌套的对象缺失时，上面的解构会报错：

  1. const obj = {};
  2.  
  3. const {
  4.   innerObj: { a, b = 2 },
  5. } = obj;
  6.  
  7. console.log(a, b); //
版权声明：本文为Wayou原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Wayou/p/14678322.html