创建函数还有另外一种非常简单的语法,并且这种方法通常比函数表达式更好。 它被称为“箭头函数”,因为它看起来像这样: let func = (arg1, arg2, ..., argN) => expression; 这里创建了一个函数 func,它接受参数 arg1..argN,然后使用参数对右侧的 expression 求值并返回其结果。 换句话说,它是下面这段代码的更短的版本: let func = function(arg1, arg2, ..., argN) { return expression; }; 让我们来看一个具体的例子: let sum = (a, b) => a + b; /* 这个箭头函数是下面这个函数的更短的版本: let sum = function(a, b) { return a + b; }; */ alert( sum(1, 2) ); // 3 可以看到 (a, b) => a + b 表示一个函数接受两个名为 a 和 b 的参数。在执行时,它将对表达式 a + b 求值,并返回计算结果。
箭头函数可以像函数表达式一样使用。 例如,动态创建一个函数: let age = prompt("What is your age?", 18); let welcome = (age < 18) ? () => alert('Hello') : () => alert("Greetings!"); welcome(); 一开始,箭头函数可能看起来并不熟悉,也不容易读懂,但一旦我们看习惯了之后,这种情况很快就会改变。 箭头函数对于简单的单行行为(action)来说非常方便,尤其是当我们懒得打太多字的时候。 多行的箭头函数上面的例子从 => 的左侧获取参数,然后使用参数计算右侧表达式的值。 但有时我们需要更复杂一点的东西,比如多行的表达式或语句。这也是可以做到的,但是我们应该用花括号括起来。然后使用一个普通的 return 将需要返回的值进行返回。 就像这样: let sum = (a, b) => { // 花括号表示开始一个多行函数 let result = a + b; return result; // 如果我们使用了花括号,那么我们需要一个显式的 “return” }; alert( sum(1, 2) ); // 3 更多内容 在这里,我们赞扬了箭头函数的简洁性。但还不止这些! 箭头函数还有其他有趣的特性。 为了更深入地学习它们,我们首先需要了解一些 JavaScript 其他方面的知识,因此我们将在后面的 深入理解箭头函数 一章中再继续研究箭头函数。 现在,我们已经可以用箭头函数进行单行行为和回调了。 总结对于一行代码的函数来说,箭头函数是相当方便的。它具体有两种:
任务用箭头函数重写用箭头函数重写下面的函数表达式: 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.") ); 是不是看起来精简多了? |
|
来自: yuxinrong > 《WPSJSA宏编程(JS)》