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

不带参的箭头函数

在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
在这里插入代码片
上一篇:找不到kotlin.jvm.functions.Function2的类文件


下一篇:看过这么多静态网站托管,这么快的页面渲染还是头一次