прохождение объекта в массив

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());

, когда я запускаю этот код на консоли, все объекты сетки массива возникают одни и те же значения х и у, которые 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 этого не делает, Typcript будет (но это не относится к делу).

Вы видите те же значения, потому что вы только когда-либо один 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>');