各位大牛，请问我这种菜鸟写的这种代码该怎么优化？

Question

     if (scrollTop >= 0 && scrollTop <= result[100] * height) {
        this.activeClass = 0;
      } else if (
        scrollTop >= result[100] * height &&
        scrollTop < (result[100] + result[200]) * height
      ) {
        this.activeClass = 1;
      } else if (
        scrollTop >= (result[100] + result[200]) * height &&
        scrollTop < (result[100] + result[200] + result[300]) * height
      ) {
        this.activeClass = 2;
      }

Answer 1

无需优化，挺好的。如果数你的优化是指代码少，但那会影响阅读体验

Answer 2

em...阅读体验方面可以进一步优化，但是如果result或者height是频繁变化的下面代码对性能会降低一点。有帮助的话麻烦点个赞

const ActiveClassList = [
    {
        test: result[100] * height,
        value: 0
    },
    {
        test: (result[100] + result[200]) * height,
        value: 1
    },
    {
        test: (result[100] + result[200] + result[300]) * height,
        value: 2
    }
]

const getActiveClass = (value) => {
    return ActiveClassList.find(item => value < item.test).value
}

const method = () => {
    if (scrollTop < 0) return
    this.activeClass = getActiveClass(scrollTop)
}

Answer 3

这种区间表达的，个人认为这么写挺好的，只不过你的计算最好前置

let limit_start = 0;
let limit_100 = result[100] * height;
let limit_200 = (result[100] + result[200]) * height;
let limit_300 = (result[100] + result[200]) * height;

if (scrollTop >= limit_start && scrollTop <= limit_100) {
    this.activeClass = 0;
  } else if (scrollTop >= limit_100 && scrollTop < limit_200) {
    this.activeClass = 1;
  } else if (scrollTop >= limit_200 && scrollTop < limit_300) {
    this.activeClass = 2;
  }

Answer 4

if(scrollTop <0) return
if (scrollTop <= result[100] * height) {
    this.activeClass = 0;
 return;
} 
if (scrollTop < (result[100] + result[200]) * height) {
    this.activeClass = 1;
 return;
} 
if (scrollTop < (result[100] + result[200] + result[300]) * height) {
    this.activeClass = 2;
}

Answer 5

  const COMPUTED_MAP = {
    '0_100':(scrollTop,result,height)=>scrollTop >= 0 && scrollTop <= result[100] * height,
    '100_200':(scrollTop,result,height)=>scrollTop >= result[100] * height && scrollTop < (result[100] + result[200]) * height,
    '200_300':(scrollTop,result,height)=>scrollTop >= (result[100] + result[200]) * height && scrollTop < (result[100] + result[200] + result[300]) * height
  }
  if(COMPUTED_MAP['0_100'](scrollTop,result,height)){
    this.activeClass = 0;
  }else if (COMPUTED_MAP['100_200'](scrollTop,result,height)){
    this.activeClass = 1;
  }else if (COMPUTED_MAP['200_300'](scrollTop,result,height)){
    this.activeClass = 2;
  }

  const COMPUTED_MAP = {
    '0_100':(scrollTop,result,height)=>scrollTop >= 0 && scrollTop <= result[100] * height,
    '100_200':(scrollTop,result,height)=>scrollTop >= result[100] * height && scrollTop < (result[100] + result[200]) * height,
    '200_300':(scrollTop,result,height)=>scrollTop >= (result[100] + result[200]) * height && scrollTop < (result[100] + result[200] + result[300]) * height
  }
  const VALUE_MAP = {
    '0_100':1,
    '100_200':2,
    '200_300':3,
  }
  for(let key in COMPUTED_MAP){
    if(COMPUTED_MAP[key](scrollTop,result,height)){
      this.activeClass = VALUE_MAP[key].value
      break;
    }
  }
 

Answer 6

  const flagArr = [0, result[100] * height, (result[100] + result[200]) * height, (result[100] + result[200] + result[300]) * height]
  for (const index in flagArr) {
    if (scrollTop === result[100] * height) {
      this.activeClass = 0
      break
    } else if (flagArr[index] >= scrollTop && scrollTop < flagArr[index + 1]) {
      this.activeClass = +index
      break
    }
  }

Answer 7

activeClass值0,1,2以及用于计算的三个高度 提前定义为常量或变量