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

Answer 2

从道具中您将获得2个参数loading＆pageName。如果pageName没有值（未定义），它将获得默认的字符串值“ default”。

您还需要写“ route”来检查嵌套键（pageName）是否在此中没有路由键。您提供默认值（空对象）的属性

Answer 3

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

我将编写以下内容，以便您轻松理解：

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

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

现在，无论深度如何，它都将完全映射属性。因此this.props.loading中的内容将进入const中的加载对象。 this.props.route.pageName中的所有内容都将进入const中的route.pageName。如果pageName为空或在props中未定义，则将使用“默认”值。就像在函数调用中没有提供默认值一样，该函数的参数也提供了默认值。

Answer 4

以最简单的形式将其编译为

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 = {};
}

ES6解构-这是做什么的？

4 个答案: