如何在 JavaScript 中使用高阶函数？

Question

我是 JavaScript 新手，几乎不知道函数式编程是如何工作的。 我遇到了问题。

 const cards = document.querySelectorAll('.card') const descriptionCards = document.querySelectorAll('.description-card') async function displayParagraph(descriptionId) { function timer(time) { return new Promise(resolve => setTimeout(resolve, time)) } await timer(500) document.querySelector(descriptionId).style.display = 'block' } cards.forEach(card => { const cardIndex = card.id['card-'.length] card.addEventListener('mouseover', () => { document.querySelector('#description-card-' + cardIndex).style.height = '302px' displayParagraph('#description-' + cardIndex) }) card.addEventListener('mouseout', () => { document.querySelector('#description-card-' + cardIndex).style.height = '0px' document.querySelector('#description-' + cardIndex).style.display = 'none' }) }) descriptionCards.forEach(descriptionCard => { const cardIndex = descriptionCard.id['description-card-'.length] descriptionCard.addEventListener('mouseover', () => { document.querySelector('#description-card-' + cardIndex).style.height = '302px' document.querySelector('#description-' + cardIndex).style.display = 'block' }) descriptionCard.addEventListener('mouseout', () => { document.querySelector('#description-card-' + cardIndex).style.height = '0px' document.querySelector('#description-' + cardIndex).style.display = 'none' }) })

 .absolute { position: absolute; } .first-row { left: 100px; } .first-column { top: 407px; } .card { background: #FFFFFF; width: 320px; height: 240px; border: 0; border-radius: 25px; box-shadow: 0px 1px 15px 10px #00000040; z-index: 1; } .card img { margin: auto; } /* Descriptions */ .description-card { position: absolute; top: 215px; width: 100%; height: 0px; background: #FFFFFF; border-radius: 0px 0px 25px 25px; transition: all 500ms; } .description { position: absolute; top: 45px; font-size: 16px; display: none; } #description-a { left: 28px; width: 263px; }

 <div class="first-row first-column absolute"> <div id="card-a" class="card"> <img src="organizations/panthera.png" alt="Panthera"> </div> <div id="description-card-a" class="description-card"> <p id="description-a" class="description">Panthera is the only organization in the world that is devoted exclusively to the conservation of the world's 40 wild cat species and their ecosystems. Utilizing the expertise of the world's premier cat biologists, Panthera develops and implements global strategies for the most imperiled large cats: tigers, lions, jaguars, snow leopards, cheetahs, pumas, and leopards.</p> </div> </div>

这完美地工作。 但是，正如您所看到的，问题在于我正在重复代码，说明当我将鼠标悬停在card或description-card时会发生什么。 基本上，当我将鼠标悬停在card或description-card时，我想要相同的行为。 自然，这是使用函数避免重复代码的好地方。 所以我尝试这样做：

 const cards = document.querySelectorAll('.card') const descriptionCards = document.querySelectorAll('.description-card') async function displayParagraph(descriptionId) { function timer(time) { return new Promise(resolve => setTimeout(resolve, time)) } await timer(500) document.querySelector(descriptionId).style.display = 'block' } function hovering() { document.querySelector('#description-card-' + cardIndex).style.height = '302px' displayParagraph('#description-' + cardIndex) } function notHovering() { document.querySelector('#description-card-' + cardIndex).style.height = '0px' document.querySelector('#description-' + cardIndex).style.display = 'none' } cards.forEach(card => { const cardIndex = card.id['card-'.length] card.addEventListener('mouseover', hovering) card.addEventListener('mouseout', notHovering) }) descriptionCards.forEach(descriptionCard => { const cardIndex = descriptionCard.id['description-card-'.length] descriptionCard.addEventListener('mouseover', hovering) descriptionCard.addEventListener('mouseout', notHovering) })

 .absolute { position: absolute; } .first-row { left: 100px; } .first-column { top: 407px; } .card { background: #FFFFFF; width: 320px; height: 240px; border: 0; border-radius: 25px; box-shadow: 0px 1px 15px 10px #00000040; z-index: 1; } .card img { margin: auto; } /* Descriptions */ .description-card { position: absolute; top: 215px; width: 100%; height: 0px; background: #FFFFFF; border-radius: 0px 0px 25px 25px; transition: all 500ms; } .description { position: absolute; top: 45px; font-size: 16px; display: none; } #description-a { left: 28px; width: 263px; }

 <div class="first-row first-column absolute"> <div id="card-a" class="card"> <img src="organizations/panthera.png" alt="Panthera"> </div> <div id="description-card-a" class="description-card"> <p id="description-a" class="description">Panthera is the only organization in the world that is devoted exclusively to the conservation of the world's 40 wild cat species and their ecosystems. Utilizing the expertise of the world's premier cat biologists, Panthera develops and implements global strategies for the most imperiled large cats: tigers, lions, jaguars, snow leopards, cheetahs, pumas, and leopards.</p> </div> </div>

但是，因为这不工作cardIndex未在规定hovering和notHovering功能。 我不知道如何将cardIndex传递到hovering和notHovering函数中，因为我不应该调用这些函数，而是将函数名称作为变量传递给addEventListener函数。

Answer 1

为了回应您提出的评论并根据问题的标题，我阅读了一篇关于 js 中高阶函数的文章，这是其中的链接：

https://jrsinclair.com/articles/2019/what-is-a-higher-order-function-and-why-should-anyone-care/

根据定义：

将函数作为参数或返回函数作为结果的函数

是一个高阶函数。 所以“addEventListener()”函数本身就是一个高阶函数。 所以使用这样一个函数的好处是你可以向它们传递不同的函数，例如你可以传递一个新的“点击”函数，如下所示：

card.addEventListener('click', ()=>clicking(cardIndex, cardNum, cardWidth))

正如您所看到的，这个新的“假设函数”可以采用三个参数并具有完全不同的动作，这就是在 javascript 中使用高阶函数的好处。