与函数表达式相比,ES6 箭头函数为您提供一种编写更短的语法。

下面的示例定义一个返回两个数字之和的函数表达式:
let add = function (x, y) { return x + y; }; console.log(add(10, 20)); // 30
下面的示例等效于上述函数表达式 add()
,但使用箭头函数代替:
let add = (x, y) => x + y; console.log(add(10, 20)); // 30;
箭头函数(Arrow Function) 是 JavaScript 中的一种简洁语法,用来定义函数。箭头函数由 ES6 引入,它在语法上简化了传统的函数声明,并且具有一些不同的行为,尤其是在处理 this
上。
箭头函数的基本语法
箭头函数的语法比普通的函数声明更简洁,通常使用 =>
语法:
const add = (a, b) => a + b;
这个箭头函数的功能与以下传统函数是等价的:
function add(a, b) { return a + b; }
较为正式的箭头函数语法
基本语法:
let func = (arg1, arg2, ..., argN) => expression;
这会创建一个函数 func
,它接受参数 arg1..argN
,然后使用这些参数计算右侧的表达式,并返回其结果。等同于:
let func = function(arg1, arg2, ..., argN) { return expression; };
具体的例子:
let sum = (a, b) => a + b; /* This arrow function is a shorter form of: let sum = function(a, b) { return a + b; }; */ alert( sum(1, 2) ); // 3
如你所见,(a, b) => a + b
表示一个接受两个参数 a
和 b
的函数。执行时,它计算表达式 a + b
并返回结果。
如果只有一个参数,那么参数周围的括号可以省略,使语法更加简洁。
箭头函数的语法结构
无参数:
如果函数没有参数,可以省略括号:
const greet = () => "Hello, World!";
等价于:
function greet() { return "Hello, World!"; }
一个参数:
如果只有一个参数,可以省略括号:
const square = x => x * x;
等价于:
function square(x) { return x * x; }
例如:
let double = n => n * 2; // roughly the same as: let double = function(n) { return n * 2 } alert( double(3) ); // 6
多个参数:
多个参数需要使用括号:
const sum = (a, b) => a + b;
有多行代码的箭头函数:
到目前为止,我们看到的箭头函数都非常简单。它们从 =>
左侧获取参数,使用这些参数计算并返回右侧的表达式。
有时候我们需要更复杂的函数,包含多条表达式和语句。这种情况下,可以用大括号 {}
将它们包裹起来。主要的区别是:在使用大括号时,必须显式使用 return
语句来返回值(就像普通函数那样)。
const sum = (a, b) => { const result = a + b; return result; };
再例如:
let sum = (a, b) => { // the curly brace opens a multiline function let result = a + b; return result; // if we use curly braces, then we need an explicit "return" }; alert( sum(1, 2) ); // 3
箭头函数可以像函数表达式(Function Expressions)一样使用。
例如,用来动态创建一个函数:
let age = prompt("What is your age?", 18); let welcome = (age < 18) ? () => alert('Hello!') : () => alert("Greetings!"); welcome();
箭头函数一开始可能看起来陌生且不太易读,但随着习惯这种结构之后,这种感觉很快就会消失。
当我们只需要执行简单的单行操作、又懒得写太多代码时,箭头函数非常方便。
未完待续
这里我们称赞了箭头函数的简洁性。但这还不是全部!
箭头函数还有其他有趣的特性。
要深入学习它们,我们首先需要了解 JavaScript 的其他一些方面,因此稍后在章节《重新探讨箭头函数》中,我们会回到箭头函数的话题。
目前,我们已经可以在单行操作和回调函数中使用箭头函数了。
摘要:
箭头函数在处理简单操作时非常方便,尤其适合单行表达式。它们有两种写法:
-
没有大括号的写法:
(...args) => expression
—— 右侧是一个表达式,函数会计算它并返回结果。如果只有一个参数,括号可以省略,例如n => n*2
。 -
有大括号的写法:
(...args) => { body }
—— 使用大括号可以在函数内部编写多条语句,但需要显式使用return
来返回值。
习题:
用箭头函数替换下面的函数表达式:
function ask(question, yes, no) { if (confirm(question)) yes(); else no(); } ask( "Do you agree?", function() { alert("You agreed."); }, function() { alert("You canceled the execution."); } );
答案:
function ask(question, yes, no) { if (confirm(question)) yes(); else no(); } ask( "Do you agree?", () => alert("You agreed."), () => alert("You canceled the execution.") );