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 person = {
    friend: {
        name: 'john',
        age: 20,
    },
};

const { friend } = person;

console.log(friend);

在这里，我们使用解构来获取prop朋友的值，并且值本身是一个对象，我们也可以对其使用解构，

来自上一个示例

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：未定义朋友，

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

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

Answer 3

在分解对象时，冒号左侧的部分是属性名称，而右侧的部分是属性值被分解为的内容。（Shorthand就像在对象文字中一样工作，其中{ 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”。

Answer 4

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

只需添加我的部分，上面的代码实际上表示以下内容

const { routerStore } = this.props.rootStore;

不是以下内容：

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

区别在于，第一个仅定义一个常量routerStore，而第二个仅定义两个常量rootStore和routerStore。所以没有什么区别。

Answer 5

它将routerStore与

分开

this.props.rootStore.routerStore

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

ES6双重解构

5 个答案: