JavaScript Array.filter uniqes 并且不阻塞 UI

Question

我有一个特定的用例，其中一些验证逻辑必须在 UI 中发生(出于各种业务原因[...])。该数组可能包含多达数十或数十万个项目 (1-400K)。前端是基于 Angular 的。

第一步是检查重复项(并将它们存储在另一个数组[...]中)。这是通过以下方式完成的:

validateTargets(targets: string[]): ValidationResultObject[] {

    let result: ValidationResultObject[];
    let dups: string[] = [];

    var uniques = targets.filter( (item,index) => {
        if (targets.indexOf(item) === index) {
        return targets.indexOf(item) === index
        }
        else {
            dups.push(targets[index])
        }
    }

    //other validation logic goes here

    return result;
}

问题是当运行超过 50K 的任何内容时，明显的 UI 卡住。目前，我已将上面的回调放在 setTimeout 中的另一个函数中，以至少允许 UI 在页面挂起时运行微调器:)

我见过人们建议如何设计代码以允许 UI 响应(或至少重新绘制)的几种方法；然而，我的情况有点棘手，因为我处理重复项。

我正在考虑将数组分解为 block ，并在 setTimeout 内循环运行上面的 Array.filter 部分(对于 UI)，但我稍后需要进行比较无论如何，这些 block 都是反对自己的，所以它只是延长了逻辑!我不太愿意与工作人员进行实验，因为组织中有些浏览器不支持这些浏览器。

有人知道如何解决这个问题吗？不，不可能将其移动到后端:(

问候

Answer 1

您可以更有效地过滤掉重复项:

let filtered = targets.reduce((result, item) => {
  result[item] = 1;
  return result;
}, {});
let noDuplicates = Object.keys(filtered);

这使得对数组进行一次传递，并利用属性名称查找的内部效率来代替 .indexOf() 的顺序搜索。对于包含大量元素的初始数组，这应该在相对较短的时间内运行。