在 javascript 中分配给 { ... } 对象时这是什么意思？ [复制]

Question

我今天在学习 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