Javascript ES6去结构化-这有什么作用？

我正试图理解ES6的这种去结构化。有人能解释一下这行代码将编译成什么吗

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

不去结构化

const loading = props.loading;
const route = props.route.pageName || 'default';

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

去结构化

const loading = props.loading;
const route = props.route.pageName || 'default';

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

我们在赋值的左侧定义不同的变量，以定义要从源变量中解包的值

加载

和

页面名

是变量

props

是源变量

我们刚刚通过将属性名称指定给左手赋值来解压

道具
对象属性

我们还可以解包嵌套对象，因为您可以在
props

因此，在解构过程中，我们将解包对象属性

这里我们给出
pageName
默认值，如果它是
未定义的

有关道具的更多信息，您将获得两个参数加载和pageName。如果pageName没有值（未定义），它将获得默认字符串值“default”

如果此中没有路由键，则还需要写入“路由”以检查嵌套键（pageName）。如果您提供默认值（空对象），则

我会将其写在下面，以便您轻松掌握：

const
    {
      loading,
      route: {
               pageName = 'default'
             }
    }

this.props is like so :
    {
      loading,
      route: {
               pageName
             }
    }

现在，不管有多深，这都会精确地映射属性。因此，这个.props.load中的任何内容都将进入const中的加载对应项。
this.props.route.pageName
中的任何内容都将进入常量中的
route.pageName
。如果
pageName
在道具中为空或未定义，则会出现“默认”值。这就像在函数调用中没有为函数的参数提供任何值时，为函数的参数提供默认值一样。
以最简单的形式编译

const loading = this.props.loading ;
let pageName ;
let route ;
if(this.props.route){
  route = this.props.route ;
  if(this.props.route. pageName){
     pageName = this.props.route. pageName ;
  } else {
    pageName = 'default' ;
  }
} else{
 route = {};
}

您正在从
此.props.load中提取
加载
，并从
此.props.route.pageName中提取
页面名
，如果没有路由，它将默认设置为空对象
{}
如果
路由
对象中没有
页面名
，它将默认设置为“默认”，这行代码引入了两个常量变量，加载和PageName我经常发现，将新代码放入在线babel编译器并将其反编译为旧版本的js会很有帮助，如果未定义
路由
，则不进行结构化的示例将不起作用，您错过了这一部分
={}
相当于：
props.route=props.route | |{}
然后可以获得
pageName
：
const pageName=props.route.pageName | |默认值”