为什么我们在Javascript中使用“key =＆gt; key”？

Question

我不理解下面的代码 key =＆gt; key.addEventListener 你能解释一下这条线吗。

const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

Answer 1

这（keys.forEach(key=>....)）等同于以下内容：

keys.forEach(function(key){ key.addEventListener('transitionend', removeTransition)});

将后者与带有箭头函数表达式，key => key.addEventListener('transitionend', removeTransition)的那个进行比较，我认为带有箭头的版本更具有succint。

正如here所述：

  

箭头函数表达式比函数具有更短的语法   表达式并不绑定它自己的this，arguments，super或   new.target。这些函数表达式最适合非方法   函数，它们不能用作构造函数。

较短的语法肯定意味着更易读的代码。更易读的代码意味着更容易快速赶上并且序列更容易维护。

Answer 2

=>被称为箭头功能。它是定义函数的简写方法。

keys.forEach(function(key){console.log(key)})

可以用

表示为箭头函数

keys.forEach(key => {console.log(key)})

key是从forEach传递的第一个参数，在本例中是currentValue。如果需要，您可以扩展它：

keys.forEach((currentValue, index, array) => {...})

如果您需要访问forEach中可用的其他参数。

有关Arrow Functions的详细信息，请参阅MDN Documentation。

Answer 3

key => key.addEventListener('transitionend', removeTransition) 

等同于

function(key){
return key.addEventListener('transitionend', removeTransition) // binding custom event to event listener
}()