ES6 双重解构答案

【问题标题】：ES6 double destructureES6 双重解构
【发布时间】：2018-12-02 15:24:05
【问题描述】：

我知道这可能是一个非常基本的问题，但我不精通 ES6，而且我遇到过这种语法：

const { rootStore: { routerStore } } = this.props;

我明白这样的意思是什么：

const { rootStore } = this.props;

（从this.props 中的属性rootStore 创建一个常量rootStore）。

但是上面的双重解构（我假设是解构）是什么意思呢？

【问题讨论】：

这叫解构，不是解构。
@Bergi - 糟糕，已修复。谢谢。

标签： javascript ecmascript-6 destructuring

【解决方案1】：

这称为嵌套解构，它在许多情况下都非常有用

让我们一点一点的理解，

看看这个例子

const person = {
    friend: {
        name: 'john',
        age: 20,
    },
};

const { friend } = person;

console.log(friend);

这里我们使用解构来获取道具朋友的值，而值本身是一个对象，我们也可以使用解构，

上一个例子

const person = {
    friend: {
        name: 'john',
        age: 20,
    },
};

const { friend } = person;

console.log(friend);

const {age} = friend ;

console.log(age) ;

现在我们也使用解构来获得年龄道具，这很漂亮而且超级方便，但是如果我只需要年龄道具而不需要朋友道具，我可以一步完成上述所有示例吗？是的！！这就是 ES6 的厉害之处，

const person = {
    friend: {
        name: 'john',
        age: 20,
    },
};

const { friend :{age} } = person;

console.log(age);

如您所见，我们一步即可获得 age 的值，这在您有嵌套对象的许多情况下很有用，在上面的代码中，如果您尝试记录您的朋友的值'会得到 ReferenceError:friend is not defined ,

你知道吗？你可以根据需要进行深度嵌套解构，看看这个复杂的例子，只是为了好玩。

const person = {
    friend: {
        name: 'john',
        other: {
            friend: {
                name: {
                    fullName: {
                        firstName: 'demo',
                    },
                },
            },
        },
    },
};

const {
    friend: {
        other: {
            friend: {
                name: {
                    fullName: { firstName },
                },
            },
        },
    },
} = person;

console.log(firstName); // demo

漂亮！！

如果您想了解有关解构的所有信息，请查看此资源

Destructuring assignment MDN

Destructuring and parameter handling in ECMAScript 6

【讨论】：

【解决方案2】：

意思是

const {rootStore} = this.props
const {routerStore} = rootStore

除了第一行不会生效，即rootStore不会被定义。

【讨论】：

在你的代码中它定义了两个常量rootStore和routerStore但是在const { rootStore: { routerStore } } = this.props;它只定义了一个常量routerStore

【解决方案3】：

const { rootStore: { routerStore } } = this.props;

只是补充一下，上面的代码实际上是下面的意思

const { routerStore } = this.props.rootStore;

以下不是：

const {rootStore} = this.props
const {routerStore} = rootStore

区别在于第一个只定义了一个常量routerStore，而第二个定义了两个常量rootStore和routerStore。所以差别不大。

【讨论】：

【解决方案4】：

解构对象时，冒号左边的部分是属性名，右边的部分是属性值被解构的内容。（简写就像在对象字面量中一样，其中{ x } 等价于{ x: x }。）根据解构出现的位置声明或分配此目标：

const { x: y } = z;
// equivalent to:
const y = z.x;

let { x: y } = z;
// equivalent to:
let y = z.x;

({ x: y }) = z;
// equivalent to:
y = z.x;

y 可以是另一种模式。所以这个：

const { rootStore: { routerStore } } = this.props;

相当于：

const { routerStore } = this.props.rootStore;

如果只使用一个属性，我也会这样写。如果有帮助，您可以将冒号读作“into”。

【讨论】：

【解决方案5】：

它将routerStore 与

分开

this.props.rootStore.routerStore

通过为 destructuring assignment 获取嵌套对象。

【讨论】：