前情提要

上回学习远距离火属性初阶魔法。

「呼，总算学完了，我来试试发射看吧！」

艾草：「欸欸，你不要都往我身上丢啊啊啊，虽然这火很弱，但不要乱来啊啊！」

「啊我就刚学会，不太会操控呀！」

艾草：「不太会操控，但都往我附近丢是怎样，根本是挟怨报复！我要投诉动保了喔(艾草设定是鸟)！」

「=x=...」

艾草：「哼，算了看我的追击箭！」

(艾草身上射出了一道透明光箭，砸中我後没感觉到疼痛，但全身被束缚住了。)

「放开我....」

艾草：「嘿嘿，求我呀！这可是我新研发的箭头魔法，我来教你原理，你自己试着解开吧！」

箭头函式

复习一下函式有两种写法分别为：函式陈述式、函式表达式。

函式陈述式

函式陈述式的组成结构：

1. 函式的名称（可自定义）
2. 小括号 () 用来放置参数，可用,逗号分隔每个参数
3. 大括号 {} 内部可以放想执行的 JavaScript 程序码

function test() {
  console.log("Hello World!"); //Hello World!
}
test();

函式表达式

函式表达式写法：先宣告一个变数後，在将一个函式赋予给该变数，而函式表达式的呼叫方式是变数名称加上()小括号。

let add = function (num1, num2) {
  return num1 + num2;
};
let num = add(1, 2);
console.log(num)//3

而函式表达式可以改写为箭头函式的形式，将 function 省略掉并在後方补上箭头 => ：

let add = (num1, num2) => {
  return num1 + num2;
};
let num = add(1, 2);
console.log(num)//3

程序码仅一行的情况下可以去掉大括号 {} 区块、return 、分号，将其缩减成一行：

let add = (num1, num2) => num1 + num2;
let num = add(1, 2);
console.log(num); //3

但要注意如果使用大括号 {} 区块就不能省略 return ：

let add = (num1, num2) => {
  num1 + num2;
};
let num = add(1, 2);
console.log(num);//undefined

如果参数只带一个的情况下，连小括号 () 都可以省略：

let sayHello = word => `Hello ${word}`;
console.log(sayHello("world"));//Hello world

只有一个参数的情况下才可以省略小括号，没有参数或参数有两个以上时，都一定要於参数外包覆小括号！

阵列方法改写

之前有提到阵列方法内会带入参数为函式，该函式也能改写成箭头函式，以 filter 为例：

原本写法

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArray = arr.filter(function (item) {
  return item > 5;
});

箭头函式写法

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArray = arr.filter((item) => item > 5);

监听函式改写

原本写法

const button = document.querySelector("button");
button.addEventListener("click", function (e) {
  console.log("button click");
});

箭头函式写法

const button = document.querySelector("button");
button.addEventListener("click", (e) => {
  console.log("button click");
});

总结

• 函式表达式可以改写为箭头函式
• 箭头函式程序码一行的情况下，可省略大括号 {} 区块、 return ，缩减成一行
• 箭头函式参数一个的情况下，可省略参数外小括号
• 阵列方法内的函式、监听函式也可改写成箭头函式写法

小练习

请问以下何种写法会报错？

//A
let arr = [1, 2, 3];
let newArray = arr.map((item) => item + 5);

//B
let test => "Hello World";

//C
let minus = (num1, num2) => {
  return num1 - num2;
};

//D
let data = [1, 2, 3];
let filterArray = data.filter(item => item == 3);

解答： B 会报错，应该改写为 let test = () => "Hello World";

参考文献

JavaScript 必修篇 - 前端修练全攻略（六角学院）
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions