javascript - 如何在 JavaScript 中使用大数组

Question

这个问题已经有答案了:

Best way to iterate over an array without blocking the UI (4 个回答)

已关闭 7 年前。

在我的应用程序中，我有一个非常大的数组(大约 60k 条记录)。使用for循环我正在对其进行一些操作，如下所示。

var allPoints = [];
for (var i = 0, cLength = this._clusterData.length; i < cLength; i+=1) {
    if (allPoints.indexOf(this._clusterData[i].attributes.PropertyAddress) == -1) {
        allPoints.push(this._clusterData[i].attributes.PropertyAddress);
        this._DistClusterData.push(this._clusterData[i])
    }
}

当我运行这个循环时，浏览器挂起，因为它非常大，并且在 Firefox 中显示弹出窗口，显示“此页面上的脚本可能正忙，或者可能已停止响应。您现在可以停止该脚本，或者您可以继续查看脚本是否会完成”。我该怎么做才能使浏览器不会挂起？

Answer 1

您需要将控制权返回给浏览器才能保持响应。这意味着您需要使用 setTimeout 结束当前处理并安排稍后恢复。例如:

function processData(i) {
    var data = clusterData[i];
    ...

    if (i < clusterData.length) {
        setTimeout(processData, 0, i + 1);
    }
}

processData(0);

从您目前所在的位置来看，这将是最简单的事情。

或者，如果它符合您想要做的事情，Web Workers将是一个很好的解决方案，因为它们实际上将工作分流到一个单独的线程中。

<小时/>

话虽如此，你目前所做的事情效率极低。您将值插入数组中，从而不断地一遍又一遍地检查越来越长的数组中包含的值。您应该使用对象键来进行重复数据删除:

var allPoints = {};

// for (...) ...
if (!allPoints[address]) {  // you can even omit this entirely
    allPoints[address] = true;
}

// later:
allPoints = allPoints.keys();