Question

此代码用于绘制蛇以制作蛇游戏。我在理解drawSnake函数的参数并调用该函数时遇到了麻烦

  //ctx is a reference to the id of the canvas
  var ctx = document.getElementById('ctx').getContext('2d');
  var WIDTH = 500;
  var HEIGHT = 500;
  var snakeList;
  ctx.font = "20px Calibri";
  var snakeBody = {
    width:20,
    height:20,
    color:'green'
  };


  drawSnake = function(sb,i) {                                    
    ctx.save();
    if (i == 0)
      ctx.fillStyle = 'black';
    else
      ctx.fillStyle = snakeBody.color;
    ctx.fillRect(sb.x,sb.y,snakeBody.width,snakeBody.height);
    ctx.restore();
  }

  startGame = function() {
    snakeList = [{x:220,y:200},
                 {x:210,y:200},
                 {x:200,y:200}];
    snakeList.forEach(drawSnake);
  }
  startGame();

在drawSnake函数中，

i来自哪里，它是什么？
在sb函数中未调用snakeList的情况下，drawSnake如何从蛇列表中获取值

在startGame函数中，其中snakeList.forEach(drawSnake);

如何在不传递参数的情况下调用drawSnake？

Answer 1

在JavaScript forEach中，假设forEach的参数是一个函数，该函数采用参数callback：

arr.forEach(function callback(currentValue, index, array) {
    // your code
});

因为drawSnake是一个函数，当您这样做时：

snakeList.forEach(drawSnake);

对于snakeList中的每个项目，将调用drawSnake设置为当前项目，并将sb设置为该项目的索引的函数i。 / p>

Answer 2

i来自drawSnake函数。通常，人们将i命名为变量以表示索引；用于指示值或数量。

forEach将通过迭代snakeList数组并将每个x和y值传递给drawSnake来调用drawSnake。

从MDN文档中：

forEach（）方法为每个数组元素执行一次提供的函数。

forEach（）的第一个参数是callBack函数（因此，在这种情况下为drawSnake），第二个参数是当前项的索引（因此为i）

Answer 3

这里的密钥取决于Array.forEach的作用。试试这个例子。

const a = [1, 2, 3, 4, 5]
a.forEach(function (x) {
  console.log(x);
});

Array.forEach接受一个参数，一个函数，并为数组中的每个项目执行该函数。在此示例中，console.log()将被调用5次，对数组中的每个项目调用一次。在控制台中，您会在控制台中的每一行看到每个元素1、2、3、4、5。

在您的代码中，我们有一个分配给snakeList的对象数组。当您调用snakeList.forEach()时，它将执行为每个元素传递的任何函数。您的代码不是调用我的示例中的匿名函数，而是调用drawSnake。实际上就像执行以下操作一样：

drawSnake({x:220,y:200}, 0);
drawSnake({x:210,y:200}, 1);
// etc.

传递给forEach函数回调的第二个参数是数组中该项的索引。

另请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Javascript函数参数有问题

3 个答案: