请教ES6解构语法的作用及指定代码的编译结果

嘿，我来一步步帮你搞懂这段代码～ 这是ES6里嵌套对象解构+多层默认值的典型用法，核心目的是从this.props里快速提取需要的属性，同时处理属性不存在的情况，避免报错还能给关键属性兜底。

先拆分代码结构 #

咱们把这段代码拆成两部分看：

const { 
  loading, 
  route: { pageName = 'default' } = {} 
} = this.props;

1. 外层：提取loading属性 #

const { loading } = this.props 其实就是语法糖，等价于：

const loading = this.props.loading;

如果this.props里没有loading，那loading变量就会是undefined，这里没给它设默认值哦。

2. 内层：嵌套解构route并设置多层默认值 #

这部分是重点：route: { pageName = 'default' } = {}

• 首先，route: 是告诉JS：我要从this.props里取出名为route的属性，然后对这个属性做嵌套解构。
• 后面的= {}是给route本身设默认值：如果this.props里根本没有route，或者route是undefined/null，那JS会把route当成空对象{}来处理——这一步很重要，不然如果route不存在，直接解构route.pageName会抛出Cannot destructure property 'pageName' of 'undefined' or 'null'的错误。
• 再看{ pageName = 'default' }：这是从route对象里提取pageName属性，并且给它设默认值。只有当route里没有pageName，或者pageName的值是undefined时，pageName才会用'default'这个兜底值（如果pageName是null/false/0这些，默认值不会生效）。

不同场景下的变量结果 #

举几个实际例子，你就能更清楚：

• 场景1：this.props = { loading: true, route: { pageName: 'home' } }
  • loading = true，pageName = 'home'
• 场景2：this.props = { loading: false }（没有route）
  • loading = false，pageName = 'default'（因为route用了默认空对象，然后pageName没找到就用默认值）
• 场景3：this.props = { route: {} }（有route但没pageName）
  • loading = undefined，pageName = 'default'
• 场景4：this.props = { route: { pageName: undefined } }
  • pageName = 'default'（默认值触发）
• 场景5：this.props = { route: { pageName: null } }
  • pageName = null（默认值只对undefined生效）

编译后的ES5代码 #

如果用Babel这类工具把这段ES6代码转成ES5，大概会变成这样：

var _this$props = this.props;
var loading = _this$props.loading;
// 处理route的默认值
var _this$props$route = _this$props.route;
var route = _this$props$route === void 0 ? {} : _this$props$route;
// 处理pageName的默认值
var _route$pageName = route.pageName;
var pageName = _route$pageName === void 0 ? 'default' : _route$pageName;

这里void 0就是undefined的安全写法，先判断route是否为undefined，再判断pageName，逻辑和ES6解构完全一致，只是用了ES5的写法展开。

总结 #

这段代码的好处是：

• 用一行代码代替了好几行的属性提取，代码更简洁
• 通过两层默认值（给route设空对象，给pageName设'default'）避免了嵌套对象解构时的报错
• 给关键属性设置兜底值，让代码更健壮

内容的提问来源于stack exchange，提问作者JS-