ES6_使用箭头函数编写简洁的函数

ES5（JS）中定义匿名函数：

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

ES6中定义匿名函数：

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

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

const myFunc = () => "value";

默认情况下，此行代码仍将返回字符串值value。

 

再来对比一下：

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

//测试：
console.log(magic());//Mon Sep 12 2022 20:47:51 GMT+0800 (中国标准时间)

ES6中可简化为一行语句：

const magic =()=> new Date();
//测试：
console.log(magic());//Mon Sep 12 2022 20:47:51 GMT+0800 (中国标准时间)

有参数的情况——

当函数只有一个参数时，可以省略小括号：

const doubler = item => item * 2;

//调用：
doubler(4); //8

当函数有多个参数时，不能省略小括号：

const multiplier = (item, multi) => item * multi;

//调用：
multiplier(4, 2); //8

例：

/*
const myConcat = function(arr1, arr2) {
  return arr1.concat(arr2);
};
*/

//使用以下箭头函数简化以上代码：
const myConcat=(arr1,arr2)=>arr1.concat(arr2);//这里省略了{}和return关键字。
/*可以在=>后面加上{}，但其中一定要加上return关键字（如下所示），否则会出错。
const myConcat=(arr1,arr2)=>{return arr1.concat(arr2)};
//也可以在=>后面加上()，得到的结果也是一样的：
const myConcat=(arr1,arr2)=>(arr1.concat(arr2));

*/

//测试：
console.log(myConcat([1, 2], [3, 4, 5])); //[ 1, 2, 3, 4, 5 ]