javascript/jQuery:搜索和更新对象数组的最有效方法

javascript / jQuery: most efficient way to search in and update an Array of Objects

本文关键字：数组 有效 方法 对象 更新 jQuery 搜索 javascript      更新时间：2023-09-26

我目前正在做一个私人/有趣的项目，这是一个基于javascript和jQuery的小型浏览器游戏。

对于这个游戏，我将数据保存到一组对象中：

this.map.push(
    { 
        "id" : id, 
        "x" : pos_x,
        "y" : pos_y
    }
);

现在我需要非常频繁地（实时地）查找和/或更新这个数组中的数据。

例如，当我需要在坐标系的某个位置找到数组索引时，我使用的是jQuery的$.each()函数：

this.getIndexAtPos = function(x, y)
{
    var index = false;
    $.each(this.map, function(key, obj){
        if(obj.x == x && obj.y == y)
        {
            index = key;
            return false;
        }
    });
    return index;
}


还有另一个例子：当我需要更新具有特定id的对象的数据时，我使用的是jQuery的$.map()函数：

this.updateCoordsById = function(id, x, y)
{
    this.map = $.map(this.map, function(obj, i)
    {
        if(obj.id == id)
        {
            //only update x, y!
            obj.x = x;
            obj.y = y;
            return obj;
        }
        else
        {
            return obj;
        }
    });
}

到目前为止，一切对我来说都很好，但我使用的电脑速度相当快，随着游戏的扩展，这些动作会越来越多。比如说每秒几百个$.each和$.map调用
这就是为什么我担心性能问题，尤其是在速度较慢的计算机上。


我的问题：我知道CCD_ 9和CCD_。这就是为什么一旦找到条目，我就在$.each函数中使用return false;来加快速度

1.我可以通过使用其他jQuery函数或更改它们的使用方式来提高性能吗
2.是否有更好的方法（从性能角度）通过使用本机javascript来解决此问题？
3.我应该使用其他数据类型/结构来提高性能吗？

注意：我需要实现的过程总是非常相似：通过coords（x，y）查找数组中的对象；通过id找到它们；按坐标（x，y）更新对象；按id更新对象，等等。


如果有任何帮助、意见和建议，我将不胜感激！

好吧，因为这是一个网格，所以将其作为网格存储在内存中是有意义的。二维数组的访问速度比一维数组快得多，还可以直接通过对象的坐标访问对象，而不用检查每个对象的坐标。

你也可以有一个容器对象，它包含你所有的对象，以它们的ID为属性，这可以让你快速按ID查找。

您可以通过将对象的ID存储在网格中，然后根据ID在容器中查找对象来将这些信息组合在一起。

我在http://jsfiddle.net/d75zkvnb/1/其示出了这方面的一个简单示例。Map对象的结构如下：

var Map = {
    init: function(){
        this.Width = 10;
        this.Height = 10;
        // grid stores the coordinates and the IDs of the object at that coordinate
        // note this is stored by y then x.
        this.grid = [];
        // stored the actual objects, indexed by id
        this.objects = {};
        // set up the grid        
        for(var y = 0; y < this.Height; ++y)
        {
            this.grid.push(new Array(this.Width));
        }    
    },
    // gets the object at (x, y)
    GetAtCoord: function(x, y)
    {
        // find the id
        var id = this.grid[y][x];
        // directly access it from the array
        return this.objects[id];
    },
    // gets the object with the ID
    GetById: function(objId)
    {
        // direct access to the object
        return this.objects[objId];
    },
    // add an object at its stored coordinates
    AddObject: function(obj){
        this.grid[obj.y][obj.x] = obj.id;
        this.objects[obj.id] = obj;
    },
    // Move an object in the grid
    MoveObject: function(objId, newX, newY)
    {
        // get the objct to move
        var theObj = this.objects[objId];
        // reove it from the grid
        this.grid[theObj.y][theObj.x] = null;
        // updates its stored position
        theObj.x = newX;
        theObj.y = newY;
        // add it back to the grid
        this.grid[newY][newX] = objId;
    }
};
相关文章：