我不明白下面的代码key => key.addEventListener请问你能解释一下这行吗？为什么我们在Javascript中使用“key => key”？
const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
这（keys.forEach(key=>....)）等效于以下：
keys.forEach(function(key){ key.addEventListener('transitionend', removeTransition)});
后者与所述一个与所述箭头函数表达式，key => key.addEventListener('transitionend', removeTransition)比较，我认为带箭头的版更succint。
由于它是表示here：
箭头函数表达式具有短语法不是函数 表达并且不结合其自身的此，自变量，超级或 new.target。这些函数表达式最适合非方法 函数，并且它们不能用作构造函数。
更短的syntaxt绝对意味着更易读的代码。更可读的代码意味着更容易赶上并更容易维护一个序列。
要扩大一点这，'=>'是[箭头函数]的语法（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions） – JRJurman
=>被称为箭头函数。这是定义函数的简写方法。
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。
key => key.addEventListener('transitionend', removeTransition)
相当于像
function(key){
return key.addEventListener('transitionend', removeTransition) // binding custom event to event listener
}()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Teemu
我投票关闭这个问题作为题外话，因为答案可以通过[阅读罚款手册]找到（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions） – Phil