ES6双重解构

Question

我了解这可能是一个非常基本的问题，但是我不精通ES6，并且遇到了以下语法：

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

我了解这样的意思：

const { rootStore } = this.props;

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

但是上述双重解构（我认为是解构）是什么意思？

Answer 1

它的意思是

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

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

Answer 2

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

只是补充一下我的部分，上面的代码实际上意味着以下内容

const { routerStore } = this.props.rootStore;

不是以下内容：

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

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

Answer 3

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

让我们一点一点地了解它，

看这个例子

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的值，这在嵌套对象的许多情况下非常有用，在上面的代码中，如果您尝试记录friend的值，则会得到ReferenceError：未定义friend，

你知道吗 ？您可以根据需要进行深层嵌套的解构，看看这个有趣的复杂例子。

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

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

console.log(firstName); // demo

漂亮 ！！

如果您想了解有关解构的一切，请查看此资源

销毁分配MDN

ECMAScript 6中的解构和参数处理