在Javascript中迭代数组并创建条件逻辑的最佳方法是什么？

标题应该解释一下，但这里有更多的细节

我正在创建一个CMS，允许客户端输入自己的内容。我正在创建的组件将具有当窗口中心滚动位置在截面高度范围内时高亮显示的截面。在渲染时，我将获取每个部分的

let{top，bottom}=row.getBoundingClientRect（）

，并将它们存储在一个数组中。然后我想创建一个方法，该方法在数组中循环并创建if语句，稍后将在我的

handleScroll（event）

方法中检查这些语句

我想在存储的

top、bottom

数组上创建一个forEach循环，并在

handleScroll

方法中进行检查，但我担心性能

我想知道最好的方法是什么

编辑：根据请求，这是我现在拥有的

  data: () => ({
    activeItem: null,
    ...
    scrollElements: [],
    ...
  }),
  mounted () {
    ...

    let elements = document.querySelectorAll('.textSide')
    elements.forEach((row) => {
      let {top, bottom} = row.getBoundingClientRect()
      this.scrollElements.push({ top: top, bottom: bottom, })
    })
  },
  ...
  },
  methods: {
    handleScroll (event) {
      let scrollPosTop = event.path[0].scrollingElement.scrollTop
      let h = window.innerHeight;
      scrollPosTop = scrollPosTop + (h / 2)
      this.scrollElements.forEach((pos, i) => {
        if (scrollPosTop >= pos.top && scrollPosTop <= pos.bottom) {
          this.activeItem = i
        }
      })
    },
    ...
  },

数据：（）=>({
activeItem:null，
...
滚动元素：[]，
...
}),
挂载（）{
...
let elements=document.querySelectorAll（'.textSide'）
elements.forEach（（行）=>{
设{top，bottom}=row.getBoundingClientRect（）
this.scrollElements.push（{top:top，bottom:bottom，}）
})
},
...
},
方法：{
handleScroll（活动）{
让scrollPosTop=event.path[0]。scrollingElement.scrollTop
设h=窗内高度；
scrollPosTop=scrollPosTop+（h/2）
this.scrollElements.forEach（（pos，i）=>{
if（scrollPosTop>=pos.top&&scrollPosTop请发布您尝试过的内容，我们可以从那里开始。我毫不怀疑您的客户会在每页上输入足够的内容，以真正发挥作用，但如果您想要性能方法，您可以使用“创建稍后将被检查的if语句”-这些if语句中的代码实际上会做什么？