javascript - ES6 解构——这是做什么的？

Question

我试图理解这种 ES6 解构。有人可以解释这行代码将编译成什么吗？

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

Answer 1

let props = {

    loading: 'Loading value goes here',
    route : {
        pageName: 'pagename value goes here'
    }
}

没有解构

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

解构

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

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

loading和pageName是变量

props 是源变量

我们刚刚解压了 props 对象属性，方法是将属性名称赋予左手赋值。

我们还可以解压嵌套对象，因为您可以看到路由是 props 中的嵌套对象

所以在解构中我们将解包对象属性

这里我们给pageName默认值，如果它是undefined

了解更多信息 check