ES6 箭头函数

箭头函数(Arrow Functions)

JavaScript中有一个有趣的特性,不管什么时候,当你须要一个函数时,你均可以在想添加的地方输入这个函数。es6

jQuery的.click()方法接受一个参数:一个函数。没问题,你能够在这里输入一个函数:编程

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

对 于如今的咱们来讲,写出这样的代码至关天然,而回忆起在这种编程方式流行以前,这种写法相对陌生一些,许多语言中都没有这种特性。1958年,Lisp首 先支持函数表达式,也支持调用lambda函数,而C++,Python、C#以及Java在随后的多年中一直不支持这样的特性。函数

// 六种语言中的简单函数示例
    function (a) { return a > 0; } // JS
    [](int a) { return a > 0; }  // C++
    (lambda (a) (> a 0))  ;; Lisp
    lambda a: a > 0  # Python
    a => a > 0  // C#
    a -> a > 0  // Java

ES6中引入了一种编写函数的新语法学习

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

当你只须要一个只有一个参数的简单函数时,可使用新标准中的箭头函数,它的语法很是简单:标识符=>表达式。你无需输入function和return,一些小括号、大括号以及分号也能够省略。
若是要写一个接受多重参数(也可能没有参数,或者是不定参数、默认参数、参数解构)的函数,你须要用小括号包裹参数list。code

// 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中看起来的样子:
    // ES6
    $("#confetti-btn").click(event => {
      playTrumpet();
      fireConfettiCannon();
    });

当使用箭头函数建立普通对象时,你老是须要将对象包裹在小括号里。ip

// 为与你玩耍的每个小狗建立一个新的空对象
    var chewToys = puppies.map(puppy => {});   // 这样写会报Bug!
    var chewToys = puppies.map(puppy => ({})); //

连接
学习ES6get

相关文章
相关标签/搜索