Javascript中的三点运算符是什么意思答案

【问题标题】：What is the meaning of the three points Operator in JavascriptJavascript中的三点运算符是什么意思
【发布时间】：2015-10-13 01:19:43
【问题描述】：

我看到了rubix代码

http://wrapbootstrap.com/preview/WB09498FH（网站右上演示点击）

这是反应组件中的代码

javascript

//react ES6
var InboxItem = React.createClass({
  mixins: [State, Navigation],
  statics: {
    ID: 0,
    resetID: function() {
      InboxItem.ID = 0;
    },
    getID: function() {
      return ++InboxItem.ID;
    }
  },
  handleClick: function(e) {
    e.preventDefault();
    e.stopPropagation();
    this.transitionTo('/app/mailbox/mail');
  },
  render: function() {
    var classes = classNames({
      'inbox-item': true,
      'unread': this.props.unread
    });

    var props = {
      href: '/app/mailbox/mail',
      onClick: this.handleClick,
      ...this.props,
      className: classes
    };

    return (
      <a {...props}>
        <div className='inbox-avatar'>
          <img src={this.props.src} width='40' height='40' className={this.props.imgClass + ' hidden-xs'} />
          <div className='inbox-avatar-name'>
            <div className='fg-darkgrayishblue75'>{this.props.name}</div>
            <div><small><Badge className={this.props.labelClass} style={{marginRight: 5, display: this.props.labelValue ? 'inline':'none'}}>{this.props.labelValue}</Badge><span>{this.props.description}</span></small></div>
          </div>
          <div className='inbox-date hidden-sm hidden-xs fg-darkgray40 text-right'>
            <div style={{position: 'relative', top: 5}}>{this.props.date}</div>
            <div style={{position: 'relative', top: -5}}><small>#{InboxItem.getID()}</small></div>
          </div>
        </div>
      </a>
    );
  }
});

点击下一行代码

...this.props

和

返回下一行代码

一个{...道具}

这个“...”是什么？

【问题讨论】：

这是一个非标准化的 ES2016 对象扩展运算符。 github.com/sebmarkbage/ecmascript-rest-spread
@zerkms 认为你先生我找到了网站developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
那篇文章看起来很相似，但不相关

标签： javascript reactjs

【解决方案1】：

正如@zerkms 在comments 中提到的那样；它是ECMAScript 2016 (ES7) Proposal 中的Object Rest/Spread Properties 语法，在React docs 中也有提及。

你看到的代码

var props = {
  href: '/app/mailbox/mail',
  onClick: this.handleClick,

  ...this.props,

  className: classes
};

被评估为以下，props 对象属性被扩展到新的 props 对象：

var props = {
  href: '/app/mailbox/mail',
  onClick: this.handleClick,

  src: 'https://example.com',
  name: 'myName',
  labelClass: 'myLabelClass',
  labelValue: 'mylabelValue',

  className: classes
};

【讨论】：