提高阵列操作的性能

Question

我在JavaScript中使用某些代码，我必须将大量数据（例如10000个对象）一次附加到数组中，并且在单击事件中我再次清空该数组并使用10000个对象重新加载该数组。这是我的代码片段：

其中＆＃34;节点＆＃34;是一个从用户数据源填充的数组。

 var Index = 0;
    var _array = new Array();
    for (var i = 0; i < this.Nodes.length; i++) {
if(this.Nodes.PLeft>this.Nodes.Cleft){
        var temp = {};
        temp["PLeft"] = this.Nodes.PLeft;
        temp["CLeft"] = this.Nodes.CLeft;
        temp["PWidth"] = this.Nodes.PWidth;
        temp["CWidth"] = this.NodesCWidth;
        temp["PTop"] = this.Nodes.PTop;
        temp["CTop"] = this.Nodes.CTop;
        temp["Height"] = this.Nodes.Height;
        _array[Index++] = temp;
    }
    }

这适用于Firefox，但对于IE和Chrome，性能太差 - 有时浏览器崩溃。我也使用push()方法进行数组，但是我没有发现性能上有太大差异。有没有人知道如何提高阵列操作的性能？

Answer 1

这里有一些问题。首先，您的循环不会访问this.Nodes的各个元素。因为你一直在引用this.Nodes.PLeft（例如），所以最终会得到相同的可能未定义的值。您必须指定索引this.Nodes[idx].PLeft。

当然，这引出了一个问题：为什么需要循环某个数组并将其转换为...数组？你不能直接使用this.Nodes而不是先将它全部转移到_array吗？

另一件事：减少循环的权重，获取循环条件语句之外的最大长度。在条件中执行此操作会导致每次都要查找该值，通过将其放入变量中，查找只会发生一次。

您可以消除temp对象并直接添加新的数组元素。同样，您可以消除冗余计数器并使用for...循环计数器。

var _array = [];
var maxlen = this.Nodes.length;
for (var idx = 0; idx < maxlen ; idx++) {
    if(this.Nodes[idx].PLeft > this.Nodes[idx].Cleft){
        // use idx for the array key IF you want it to match with this.Nodes indexes
        // if you don't care, use _array.length
        _array[_array.length] = {
            'PLeft':this.Nodes[idx].PLeft,
            'CLeft':this.Nodes[idx].CLeft,
            'PWidth':this.Nodes[idx].PWidth,
            'CWidth':this.Nodes[idx].CWidth,
            'PTop':this.Nodes[idx].PTop,
            'CTop':this.Nodes[idx].CTop,
            'Height':this.Nodes[idx].Height
        };
    }
}