javascript - 两个不同数组的addEventListener - forEach - 代码优化

Question

我刚刚开始学习 JavaScript。我有一个问题需要找到此代码的改进。

是否可以在一个函数 forEach 中包含“document.querySelectorAll”中的两个不同数组或其他方式来优化下面的代码？我知道如何用一个来做到这一点，但是，我不知道如何组合按钮和部分，将一个数组中的第一个元素(按钮[0])传递到另一个数组的第一个元素(部分[0])？我怎样才能让这段代码变得更好、更短、更灵活？

谢谢你的帮助!

function scrollSections(element) {
  window.scrollTo({
    'behavior': 'smooth',
    'left': 0,
    'top': element.offsetTop
  });
}

const btns = document.querySelectorAll('.js-btn');
const sections = document.querySelectorAll('.js-section');

btns[0].addEventListener('click', () => {
  scrollSections(sections[0]);
});

btns[1].addEventListener('click', () => {
  scrollSections(sections[1]);
});

btns[2].addEventListener('click', () => {
  scrollSections(sections[2]);
});

btns[3].addEventListener('click', () => {
  scrollSections(sections[3]);
});

Answer 1

是的，使用 forEach 循环，如下所示:

const btns = document.querySelectorAll('.js-btn');
const sections = document.querySelectorAll('.js-section');
btns.forEach((btn, index) => btn.addEventListener("click", () => scrollSections(sections[index])));