通过Id

时间:2018-05-09 18:49:16

标签: javascript performance

性能非常关键,我希望有更好的方法通过Id更新阵列。我正在寻找更新版本的更新功能(如下所示),它不需要多次迭代第二个数组。

我在下面添加了示例代码段,以显示我尝试做的事情。请记住,这些数组可能包含数百个对象,需要每秒更新几次。



var array1 = [{
	id:"asd4567wds8",
  x: 109,
  y: 763,
  /* These values also have other properties that I need to keep */
}, {
	id:"df567wgfdz4",
  x: 450,
  y: 132,
  /* These values also have other properties that I need to keep */
}, {
	id: "cvbz5476zzg",
  x: 903,
  y: 865,
  /* These values also have other properties that I need to keep */
}]

var array2 = [{
	id:"df567wgfdz4",
  x: 450,
  y: 137
},{
	id:"asd4567wds8",
  x: 114,
  y: 763
}, {
	id: "cvbz5476zzg",
  x: 908,
  y: 870
}]

$("document").ready(function(){
	display();
  $("#update").click(function(){
  	update();
    display();
  })
})

/*************************************
* Is there a better way to do this? *
*************************************/

function update(){
	array1.forEach(function(element){
  	var temp = array2.find(function(element2){
    	return element.id === element2.id
    })
    
    element.x = temp.x
    element.y = temp.y
  })
}

function display(){
	$("#Array1").empty();
  $("#Array2").empty();
	array1.forEach(function(element){
  	var p = $("<span>").text(`[${element.x}, ${element.y}]`)
    $("#Array1").append(p)
  })
  array2.forEach(function(element){
  	var p = $("<span>").text(`[${element.x}, ${element.y}]`)
    $("#Array2").append(p)
  })
  if(test(array1, array2)){
    $("#test").text("Success!")
  } else {
    $("#test").text("Values do not match")
  }
}



/* Test function do not change */
function test(array1, array2){
  var clear = true;
  array1.forEach(function(element){
    var temp = array2.find(function(element2){
      return element.id === element2.id
    });
    
    clear = (element.x === temp.x && element.y === temp.y)?clear:false
  });
  
  return clear;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Array1">Array 1: </div>
<div id="Array2">Array 2: </div>

<button id="update">
Update
</button>
<h3 id="test"></h3>
</body>
&#13;
&#13;
&#13;

上下文:我正在利用套接字创建一个游戏,我希望用一个巨大的块中的游戏其他对象的新位置来更新客户端。

1 个答案:

答案 0 :(得分:1)

您还可以在一个或两个阵列上运行map函数,以便获得@Doug提到的结构。

object2 = { "df567wgfdz4" : { x: 450, y: 137 }, "asd4567wds8" : { x: 114, y: 763 }, "cvbz5476zzg": { x: 908, y: 870 }

获得上述内容的map函数看起来像这样:

array2.map(newObj => {
    var rObj = {};
    var sObj = {};
    sObj['x'] = newObj.x;
    sObj['y'] = newObj.y;
    rObj[newObj.id] = sObj;
    return rObj;
});