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

最近做了直播相关的业务，然后对于大数据相关的优化做了一下复盘。

为了了解我是怎么做这个优化的，我们先从如何按照特定的条件删除一个数组说起。

1、如何删除数组中的元素
场景：有一个数组，需要删除满足条件的数组。

示例：

1
const arr = [1,2,3,4,5,6,7,8]
删除小于5的元素,删除后的元素为

1
const arr2 = [5, 6, 7, 8]
代码实现：

1
2
3
4
5
6
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)
}
}
结果如下

arr = [2, 4, 5, 6, 7, 8

不是我们预期的结果

分析原因：删除操作会使得对应索引值位上的元素清空，整个数组中的元素向前移动一位，补位的元素会填充到执行删除操作的索引值位置上，移位之后如果不进行任何操作继续下一个循环，会导致补位元素跳过遍历，为了防止这种补位元素跳过遍历现象，应该在删除操作后将索引值减1，对执行删除操作的索引值位置再进行一次遍历 。

改进：

1
2
3
4
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)
i–;
}
}
// arr = [5, 6, 7, 8] 符合预期
这个是做了正序循环删除，也可以使用倒序循环删除：

1
2
3
4
5
6
7
const arr = [1,2,3,4,5,6,7,8]
for(let i = arr.length - 1; i >= 0; i–) {
if(arr[i] < 5) {