为什么我们在 Javascript 中使用 "key => key"？

Question

我不明白下面的代码键=>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)，我认为带有箭头的版本更简洁。

正如这里所说：

箭头函数表达式的语法比函数短 表达式并且不绑定自己的 this、参数、super，或 这些函数表达式最适合非方法。 函数，并且它们不能用作构造函数。

更

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

Answer 2

=>称为箭头函数。它是定义函数的速记方法。

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

可以表示为箭头函数

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

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

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

如果您需要访问 forEach 中提供的其他参数。

有关箭头函数的更多详细信息，请参阅 MDN 文档。

Answer 3

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

相当于类似

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