水牛的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;

来个小练习巩固一下

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

来个练习吧

// 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
在这里插入代码片

发布了60 篇原创文章 · 获赞 18 · 访问量 5189

私信关注