ECMAScript 6 新增了使用胖箭头(=>)语法定义函数表达式的能力。很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。

开头注意:箭头函数为匿名函数,本身无法进行函数提升!这意味着调用函数需要写在函数声明的下面


任何可以使用函数表达式的地方,都可以使用箭头函数:

  1. let arrowSum = (a, b) => {
  2. return a + b;
  3. };
  4. let functionExpressionSum = function(a, b) {
  5. return a + b;
  6. };
  7. console.log(arrowSum(5, 8)); // 13
  8. console.log(functionExpressionSum(5, 8)); // 13

箭头函数简洁的语法非常适合嵌入函数的场景:

  1. let ints = [1, 2, 3];
  2. console.log(ints.map(function(i) { return i + 1; })); // [2, 3, 4]
  3. console.log(ints.map((i) => { return i + 1 })); // [2, 3, 4]

如果只有一个参数,那也可以不用括号。只有没有参数,或者多个参数的情况下,才需要使用括号:

  1. // 以下两种写法都有效
  2. let double = (x) => { return 2 * x; };
  3. let triple = x => { return 3 * x; };
  4. // 没有参数需要括号
  5. let getRandom = () => { return Math.random(); };
  6. // 多个参数需要括号
  7. let sum = (a, b) => { return a + b; };
  8. // 无效的写法:
  9. let multiply = a, b => { return a * b; };

  • 箭头函数也可以不用大括号,但这样会改变函数的行为。使用大括号就说明包含“函数体”,可以在一个函数中包含多条语句,跟常规的函数一样。
  • 如果不使用大括号,那么箭头后面就只能有一行代码,比如一个赋值操作,或者一个表达式。
  • 而且,省略大括号会隐式返回这行代码的值:
    1. // 以下两种写法都有效,而且返回相应的值
    2. let double = (x) => { return 2 * x; };
    3. let triple = (x) => 3 * x;
    4. // 可以赋值
    5. let value = {};
    6. let setName = (x) => x.name = "Matt";
    7. setName(value);
    8. console.log(value.name); // "Matt"
    9. // 无效的写法:
    10. let multiply = (a, b) => return a * b;
    箭头函数属于匿名函数,匿名函数是要通过赋值语句赋值给变量,这个赋值的过程是在代码执行阶段进行的,不是在声明阶段,所以没有函数声明提升的特性。

    注意

    箭头函数虽然语法简洁,但也有很多场合不适用。箭头函数不能使用 argumentssupernew.target,也不能用作构造函数。此外,箭头函数也没有 prototype 属性。