水牛的es6日记第二天【箭头函数Arrow Functions】szuwaterbrother的博客-

不带参的箭头函数

在JavaScript中，我们通常不需要命名函数，尤其是在将一个函数作为参数传递给另一个函数时。相反，我们创建内联函数。我们不需要命名这些函数，因为我们不会在其他任何地方重用它们。

为此，我们经常使用以下语法：

const myFunc = function() { const myVar = "value"; return myVar; } 

ES6为我们提供了语法糖，而不必以这种方式编写匿名函数。相反，您可以使用箭头函数语法：

const myFunc = () => { const myVar = "value"; return myVar; } 

当没有函数体，只有一个返回值时，箭头函数语法使您可以省略关键字return以及代码周围的括号。这有助于将较小的函数简化为单行语句：

const myFunc = () => "value"; 

默认情况下，此代码仍将返回值。

一般模板

改前

var magic = function() { "use strict"; return new Date(); }; 

改后

const magic= ()=> {"use strict"; return new Date(); } 

带参的箭头函数

就像常规函数一样，您可以将参数传递给箭头函数。

// doubles input value and returns it const doubler = (item) => item * 2; 

如果箭头函数具有单个参数，则可以省略包围该参数的括号。

// the same function, without the argument parentheses const doubler = item => item * 2; 

可以将多个参数传递给箭头函数。

// multiplies the first input value by the second and returns it const multiplier = (item, multi) => item * multi; 

来个小练习 巩固一下

• 重写myConcat函数，该函数将arr2的内容追加到arr1，以便该函数使用箭头函数语法。

var myConcat = function(arr1, arr2) { "use strict"; return arr1.concat(arr2); };  console.log(myConcat([1, 2], [3, 4, 5])); 

动动脑筋

答案是

const myConcat = (arr1, arr2) =>{ "use strict"; return arr1.concat(arr2); };  console.log(myConcat([1, 2], [3, 4, 5])); 

补充：默认参数

为了帮助我们创建更灵活的功能，ES6引入了功能的默认参数。 查看以下代码：

const greeting = (name = "Anonymous") => "Hello " + name;  console.log(greeting("John")); // Hello John console.log(greeting()); // Hello Anonymous 

来个练习吧

• 通过添加默认参数来修改函数increment，以便在未指定value的情况下将数字加1。

// Only change code below this line const increment = (number, value) => number + value; // Only change code above this line 

答案

// Only change code below this line const increment = (number, value=1) => number + value; // Only change code above this line 在这里插入代码片