Question

问题

我有一个二维数组calles＆＃34; matrix＆＃34 ;,我在其中添加了一些像这样的数组：[x，y]。现在，我想从中删除一个元素数组，但是Array.prototype.splice正在做两次。

我的HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="mycanvas" width="160" height="160"></canvas>
</body>
</html>

的JavaScript

var ctx = document.getElementById("mycanvas").getContext("2d"),
    matrix = [];

for(var m = 0; m<5; m++)
  for(var n = 0; n<5; n++)
    matrix.push([m,n]);

function randPos(){
  var z = Math.floor(Math.random()*matrix.length);
  var m = matrix[z];
  matrix.splice(z,1);
  return m;
}

setInterval(function(){
var m = new Image();
m.src="http://blog.waterrightsimages.com/wordpress1/wp-content/themes/photocrati-theme/images/social/small-facebook.png";
m.onload = function(){
  ctx.drawImage(this,randPos()[0]*32,randPos()[1]*32);
};
console.log(matrix.length);
}, 1000);

我该如何解决这个问题？

Answer 1

好像你在ctx.drawImage(this,randPos()[0]*32,randPos()[1]*32);中运行了两次这个功能你试过这个ctx.drawImage(this,matrix[0]*32,matrix[1]*32);吗？

由于matrix是全局的，您可以在setInterval内调用它，如下所示

 setInterval(function(){
      var m = new Image();
      m.src="http://blog.waterrightsimages.com/wordpress1/wp-content/themes/photocrati-theme/images/social/small-facebook.png";
 m.onload = function(){
   randPos();/*or matrix=randPos();*/
   ctx.drawImage(this,matrix[0]*32,matrix[1]*32);
 };
 console.log(matrix.length);
 }, 1000);

Answer 2

如果我理解正确，您可以尝试使用此方法，例如：

var cars = 
 [
  ["BMW", "320"],
  ["Mercedes", "E220"],
  ["Dacia", "Logan"],
  ["Dacia", "Duster"],
  ["Ford", "Fiesta"],
  ["Infiniti", "FX30d"]
 ]
cars[4].splice(1,1);
console.log(cars);

意味着您将从第二个元素= Fiesta <第二个元素中删除第五个数组（不要忘记0是第一个） / strong>。

Answer 3

由于您要拨打splice两次，因此删除了两项：

m.onload = function(){
  ctx.drawImage(this,randPos()[0]*32,randPos()[1]*32);
};

randPos被调用两次，后者又调用了splice两次。不要尝试内联这样的调用，而是调用它一次并将结果赋值给变量，然后从该变量中获取x / y位置。

m.onload = function(){
  var pos = randPos();
  ctx.drawImage(this, pos[0]*32, pos[1]*32);
};

JavaScript - Array.prototype.splice从数组中删除两个元素

3 个答案: