javascript - 在 JavaScript 中分配给 { ... } 对象时这意味着什么？

Question

这个问题已经有答案了:

What does curly brackets in the `var { ... } = ...` statements do? (4 个回答)

已关闭 6 年前。

我今天在学习 React 时遇到了这行代码:

import React, {Component, PropTypes } from 'react';

class App extends Component {

    static propTypes = {
        transactions: PropTypes.array,
        summary: PropTypes.object,
        gridFields: PropTypes.array,
        actions: PropTypes.object
    };
    componentWillMount() {
        const { transactions, actions } = this.props;
        actions.requestSum(transactions);
    }

    render() {
        const {
          transactions,
          gridFields,
          summary,
          actions
        } = this.props;

        return (
          <div className="viewport">
            <Header addTodo={actions.addTodo} />
            <Grid fields={gridFields} data={transactions}>
              <TransactionForm action={actions.addTransaction}/>
              <TransactionSummary data={summary} fields={gridFields} />
            </Grid>
          </div>
        );
      }
    }

}

但是 const {transactions, actions} = this.props 是什么？意思是？我已经习惯了这样的事情:

const myVariable = 3;

React 如何知道在事务和操作中存储什么内容？

Answer 1

这个解构语句

const {transactions, actions} = this.props;

含义类似于以下:

const transactions = this.props.transactions,
      actions = this.props.actions;

要了解更多解构理解，请访问这里:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment