如何在 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 中使用高階函數的好處。