Javascript 如何在数组中映射或放置变量？

我甚至不确定我在这里要实现的目标的合适术语是什么

下面是我编写的有效脚本

如果视图中有div（内容a），则元素（菜单1）的类将更改

如果一个div（content b）在视图中，元素（menu 2）的类将被更改。（再重复5次）

var elem1=document.querySelectorAll（'.menu1'）；
var elem2=document.querySelectorAll（'.menu2'）；
var contentOne=document.querySelector（“#content one”）；
var contentTwo=document.querySelector（“#content two”）；
var isInViewport=函数（元素）{
var distance=elem.getBoundingClientRect（）；
返回(
distance.top>=0&&
距离左>=0&&
distance.bottom您的问题旨在避免代码重复。这段重复的代码可以放入函数中，您应该设计函数，以便在参数中显示从一个调用更改为另一个调用的部分。一种可能性是：

function replaceClassIfVisible(content, elements, elementClassName) {

  if (isInViewport(content)) {
    
    for (var i = 0; i < elements.length; i++) {
      elements[i].className = elements[i].className.replace(
                elementClassName,
                'active'
            );
    } 
  } else {
    for (var i = 0; i < elements.length; i++) { 
      elements[i].className = elements[i].className.replace(
                'active',
                elementClassName
            );
    }
 }
}

通过将id名和类名作为字符串传递，并从函数内部查询DOM，可以做得更好

如果您想将这些字符串组织到数组中，那么您可以以某种方式对它们进行迭代，并进行调用，如
contentIds.forEach（（content，i）=>replaceClassfvisible（content，menuClassNames[i]）
。我可以看到.forEach方法可以使代码更简洁的其他地方

  replaceClassIfVisible(contentOne, elem1)
  replaceClassIfVisible(contentTwo, elem2)
  // et cetera

你有一些额外的问题，但也许你应该把它们作为单独的问题来问。希望这能为你指明正确的方向

  replaceClassIfVisible(contentOne, elem1)
  replaceClassIfVisible(contentTwo, elem2)
  // et cetera