Write the Code. Change the World.

8月 30

ECMAScript 2017(ES8)已经发布,很多习惯语法却停留在ES6之前。路在前方。

ES8相关

http://www.php.cn/js-tutorial-374051.html

https://segmentfault.com/a/1190000010213513

http://www.jianshu.com/p/a138a525c287

ES6箭头函数

这里仅仅列出一些例子,详细阐述在下边的链接文章中。

    // ES5
    var selected = allJobs.filter(function (job) {
      return job.isSelected();
    });
    // ES6
    var selected = allJobs.filter(job => job.isSelected());

如果要写一个接受多重参数(也可能没有参数,或者是不定参数、默认参数、参数解构)的函数,你需要用小括号包裹参数list。

    // ES5
    var total = values.reduce(function (a, b) {
      return a + b;
    }, 0);
    // ES6
    var total = values.reduce((a, b) => a + b, 0);

那么不是非常函数化的情况又如何呢?除表达式外,箭头函数还可以包含一个块语句。

    // ES5
    $("#confetti-btn").click(function (event) {
      playTrumpet();
      fireConfettiCannon();
    });

        // ES6
    $("#confetti-btn").click(event => {
      playTrumpet();
      fireConfettiCannon();
    });

箭头函数没有它自己的this

曾经,我们封装嵌套函数,匿名函数时。总先什么一个变量获取this的引用,然后在嵌套函数内部使用。在箭头函数这里,已经不需要这样了。

    {
      ...
      addAll: function addAll(pieces) {
        var self = this;
        _.each(pieces, function (piece) {
          self.add(piece);
        });
      },
      ...
    }

    // ES6
    {
      ...
      addAll: function addAll(pieces) {
        _.each(pieces, piece => this.add(piece));
      },
      ...
    }

    // 甚至可以写成下边这样的
    // ES6的方法语法
    {
      ...
      addAll(pieces) {
        _.each(pieces, piece => this.add(piece));
      },
      ...
    }

更多

更多信息请进下边的链接。

http://www.infoq.com/cn/articles/es6-in-depth-arrow-functions

http://www.infoq.com/cn/profile/%E5%88%98%E6%8C%AF%E6%B6%9B

http://www.css88.com/archives/tag/es2016

https://babeljs.io/learn-es2015/

发表评论

电子邮件地址不会被公开。 必填项已用*标注