箭头函数表达式

2024-04-25 01:52| 来源: 网络整理| 查看: 265

让我们逐步将传统的匿名函数分解为最简单的箭头函数。每一步都是一个有效的箭头函数。

备注：传统函数表达式和箭头函数除了语法上的区别外，还有更多的不同。我们将在接下来的几个小节中详细介绍它们的行为差异。

js// 传统匿名函数 (function (a) { return a + 100; }); // 1. 移除“function”，并将箭头放置于参数和函数体起始大括号之间 (a) => { return a + 100; }; // 2. 移除代表函数体的大括号和“return”——返回值是隐含的 (a) => a + 100; // 3. 移除参数周围的括号 a => a + 100;

在上面的示例中，参数周围的括号和函数体周围的大括号都可以省略。但是，只有在某些情况下才能省略。

只有当函数只有一个简单参数时，才能省略括号。如果函数有多个参数、无参数、默认参数、重组参数或其余参数，则需要在参数列表周围加上括号。

js// 传统匿名函数 (function (a, b) { return a + b + 100; }); // 箭头函数 (a, b) => a + b + 100; const a = 4; const b = 2; // 传统无参匿名函数 (function () { return a + b + 100; }); // 无参箭头函数 () => a + b + 100;

只有当函数直接返回表达式时，才可以省略大括号。如果函数体有额外的处理，则大括号是必需的，return 关键字也是必需的。箭头函数无法猜测函数体返回什么或何时返回。

js// 传统匿名函数 (function (a, b) { const chuck = 42; return a + b + chuck; }); // 箭头函数 (a, b) => { const chuck = 42; return a + b + chuck; };

箭头函数总是未命名的。如果箭头函数需要调用自身，请使用具名函数表达式。也可以将箭头函数赋值给一个变量，这样它就有了名字。

js// 传统函数 function bob(a) { return a + 100; } // 箭头函数 const bob2 = (a) => a + 100;

【本文地址】

箭头函数表达式

箭头函数表达式

今日新闻

推荐新闻