JS前端千万级弹幕数据循环优化示例

const arr = [1,2,3,4,5,6,7,8]

const arr2 = [5, 6, 7, 8]

const arr = [1,2,3,4,5,6,7,8]
for(let i = 0, len = arr.length; i < len; i++) {
	if(arr[i] < 5) {
		arr.splice(i, 1)
	}
}

const arr = [1,2,3,4,5,6,7,8]
for(let i = 0, len = arr.length; i < len; i++) {
	if(arr[i] < 5) {
		arr.splice(i, 1)
    i--;
	}
}
// arr = [5, 6, 7, 8] 符合预期

const arr = [1,2,3,4,5,6,7,8]
for(let i = arr.length - 1; i >= 0; i--) {
	if(arr[i] < 5) {
		arr.splice(i, 1)
	}
}
// arr = [5, 6, 7, 8] 符合预期

// 模拟原始消息列表，
const newList = new Array(10000000).fill(1).map((item, index) => {
  return {
    time: (index + 1) * 1000,       // 消息发送的时间，一秒一个
    content: `这是第${index + 1}s发送的消息` // 消息发送的内容
  }
})
// 发送的消息列表
const sendList = [];
function getMessage(time) {
  let j = 0; // 循环次数
  for(let i = 0, len = newList.length; i < len; i++) {
    const item = newList[i];
    j++;
    // 这里的time如果不是1000、2000，而是1234、1214这种，就需要取一个浮动范围
    // 我这里就是简单用了定时器，所以比较简单
    if(item.time === time) {
      sendList.push(newList[i])
      newList.splice(i, 1)
      i--;
    } else if(sendList.length > 0) {
        break;
    }
  }
  console.log('播放进度', time)
  console.log('循环的次数', j);
  console.log('接收的消息的长度', sendList.length, sendList);
  console.log('原始消息的长度', newList.length);
}
let time = 0;
// 定时器,1s触发一次
setInterval(() => {
  time += 1000;
  getMessage(time);
}, 1000)

// 消息格式
newList = [
  {time: 1000, content: '这是第1s发送的消息'},
  {time: 2000, content: '这是第2s发送的消息'},
  ...
]

  let index = 0， sendList =[];
  function getMessage(time) {
    for(let i = 0, len = newList.length; i < len; i++) {
        const item = newList[i];
        // 这里的time如果不是1000、2000，而是1234、1214这种，就需要取一个浮动范围
        // 我这里就是简单用了定时器，所以比较简单
        if(item.time === time) {
          index = i;
          sendList.push(newList[i])
        } else if(sendList.length > 0) {
            // 这里的查询结束条件为，对应的时间范围之外没有消息了，并且需要发送的消息列表有消息，才break
        // 这里的结束条件想不到什么更好的方案了
        break;
    }
  }
}

function binarySearch(arr, time) {
    let upperBound = arr.length - 1; // 记录长度
    let lowerBound = 0; // 记录上次二分的位置
    let mid;
    // 切半分的位置 小于或等于 1就停止循环了
    while (lowerBound <= upperBound) {
      // (当前总长度 + 当前中间点位置长度) / 2 = 实际的中间点位置
      mid = Math.floor((upperBound + lowerBound) / 2);
      const item = arr[mid];
      const maxTime = time +　500;
      const minTime = time + 500;
      // 当输入的值大于中间值时，向后移动一位
      if (time > maxTime) {
        lowerBound = mid + 1;
      } else if (time < minTime) {
        // 当输入值小于中间值时，向前移动一位
        upperBound = mid - 1;
      } else {
        return mid; // 找到指定数据位置
      }
    }
    return -1;
  }

function findIndex(startPlayTime: number) {
    const searchIndex = binarySearch(this.messageList, time);
    // 赋值索引，用于快速发送消息
    if (searchIndex !== -1) {
      index = searchIndex;
    }
  }