将对象传递给数组

Question

var initGrid = function() {

  //creating a grid while initialising it
  var grid = [];

  // declaring each grid element as a Object having three properties
  var gridElement = {
    x: Number,
    y: Number,
    val: Number
  };

  for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
      gridElement.x = i;
      gridElement.y = j;
      gridElement.val = 0;
      grid.push(gridElement);
    };
  };

  return grid;
};

console.log(initGrid());

当我在控制台上运行此代码时，网格数组的所有对象都具有相同的 x 和 y 值，即 9 和 9....

但我想根据循环变量创建具有不同值的对象

Answer 1

这是因为，对象是通过引用传递的。您必须在每次迭代中创建不同的对象。

示例如下。

var initGrid = function() {

  //creating a grid while initialising it
  var grid = [];

  for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
      var gridElement = {}
      gridElement.x = i;
      gridElement.y = j;
      gridElement.val = 0;
      grid.push(gridElement);
    };
  };

  return grid;
};

console.log(initGrid());

Answer 2

您不是以这种方式声明 gridElement 类型； Javascript 不会那样做，Typescript 会（但这不是重点）。

您会看到相同的值，因为您只有一个 gridElement 对象，即您使用

创建的对象

var gridElement = {
  x: Number,
  y: Number,
  val: Number
};

对于上下文，它初始化一个对象，其属性 x、y 和 val 都指向 Number 构造函数。

每次循环迭代都会改变同一个对象，并将对该对象的引用推送到您的网格上，因此您实际上没有 100 个 x 和 y 等于9 - 您有 100 个对同一个对象的引用，其中您写入 x 和 y 的最后一个值都是 9.

例如，您可以按如下方式在每个循环中创建新对象：

for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    var newGridElement = {
      x: i,
      y: j,
      val: 0
    };
    grid.push(newGridElement);
    console.log(newGridElement);
  };
};

您可以声明一个 GridElement 构造函数和您自己的类型，但如果您真的需要它，您可以自己做一些类似 defining a Javascript class 的事情。

Answer 3

您可以使用一个用户定义的对象，一个函数和一个带有 new 运算符 [MDN] 的实例。这为数据结构提供了一个接口。

var initGrid = function () {
    var grid = [];

    function GridElement(x, y, val) {            // user-defined function
        this.x = x;                              // properties
        this.y = y;
        this.val = val;
    };

    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            grid.push(new GridElement(i, j, 0)); // use an instance of GridElement with new
        };
    };

    return grid;
};

document.write('<pre>' + JSON.stringify(initGrid(), 0, 4) + '</pre>');

将对象传递给数组

passing Object into Array

javascript

arrays

javascript-objects