javascript 如何在不刪除數組現有屬性的情況下向循環內的數組坐標添加其他屬性

Question

我已將程序中的錯誤縮小到以下內容。

只要 maxlayout 等於 1，以下循環就可以工作，但如果它等於 2，從而使循環運行兩次，則原始值將被擦除。

因此，如果循環運行一次，則 mainArray.tilef0 將等於 tile.empty 但如果 tan 兩次，則 mainArray.tilef0 將是未定義的， mainArray.tilef1 將等於 tile.empty

對於其他屬性（例如地形和固體）也是如此。

for (var k = 0; k < maxlayout; k++){
       mainArray[i][j] = {
          ['tilef' + k]: tile.empty,
          ['terrainf' + k]: "empty",
          ['solidf' + k]: "false",
        };

Barmar 和 Henery回答了我的問題，但我想我會在下面添加整個代碼。 以便他們或其他人可以看到它如何幫助和/或幫助我或其他人查看是否有更好的方法，例如在我需要幫助之前初始化數組。

所以下面是他們幫助我使用的代碼的功能版本。

如果它很亂，我很抱歉，我努力保持代碼干凈並且不知道做事的所有標准方法。 但我添加了很多評論。

 function gameloop() { // Entire Game contained withing function var mainArray = []; // most game data will be held withing the array var mapSizeX = 32; // sets the height of the rendered map and corresponding array coordinates var mapSizeY = 128; // sets the width var idPos = {x: 16, y: 64}; // currently used to set player location and check for collisions var rendFlr = 0; // sets which floor to render var maxlayout = 3; var tile = { // lists charcters used for rendered tiles and objects player: "☺", empty: ".", wall: "#", oak: "♠", maple: "♣", grass: "‚", tallgrass: "„" }; function initMap(mapSizeX, mapSizeY) { // expands and populates the array for (var i = 0; i < mapSizeX; i++) { mainArray.push([]) // I belive this is only expaning it 2 dimesionaly and matching the height for (var j = 0; j < mapSizeY; j++) { for (var k = 0; k < maxlayout; k++){ const obj = mainArray[i][j] || {}; // creates on object to alter and add back into the main array obj['tilef' + k] = tile.empty; obj['terrainf' + k] = "empty"; obj['solidf' + k] = "false"; mainArray[i][j] = obj; if(k > 0){ if (j == 0 || // wraps the underground floor 1 in walls j == mapSizeY - 1 || i == 0 || i == mapSizeX - 1) { mainArray[i][j]['tilef' + k] = tile.wall; mainArray[i][j]['terrainf' + k] = "wall"; mainArray[i][j]['solidf' + k] = "Wall"; } } } //else{ // un need as the above for j is already creating empties //mainArray[i][j].terrain = "empty"; //mainArray[i][j].solid = "false"; //} } } } function getRndInteger(min, max) { // returns random number from min to max number appears to not function predictably if min and max are the same number return Math.floor(Math.random() * (max - min + 1) ) + min; } function randAdd(odds,feature,solid) { // A chance to add named feature and solid type or message if the "odds" or max number provided is rolled. for (var i = 0; i < mapSizeX; i++) { for (var j = 0; j < mapSizeY; j++) { if (mainArray[i][j].terrainf0 === "empty") { roll = getRndInteger(1,odds); if(roll === odds){ mainArray[i][j].terrainf0 = feature; mainArray[i][j].tilef0 = tile[feature]; mainArray[i][j].solidf0 = solid; } } } } } function randAdd1(odds,feature,solid) { // Same as above function but for floor 1 and should eventually be merged into a single function for (var i = 0; i < mapSizeX; i++) { for (var j = 0; j < mapSizeY; j++) { if (mainArray[i][j].terrainf0 === "empty") { roll = getRndInteger(1,odds); if(roll === odds){ mainArray[i][j].terrainf1 = feature; mainArray[i][j].tilef1 = tile[feature]; mainArray[i][j].solidf1 = solid; } } } } } function genMaps(){ randAdd(200,"wall","solid rock"); randAdd(100,"oak","a tree"); randAdd(100,"maple","a tree"); randAdd(2,"grass","False"); randAdd(2,"tallgrass","False"); randAdd1(1,"wall","solid rock"); } function nl() { // Creates a new line in the rendered text GameScreen.innerText += "\\n"; } function render(flr) { // displays the array tiles to the browser GameScreen.innerText = mainArray.map(arr => arr.map(cell => cell['tilef' + flr]).join("")).join("\\n"); nl(); nl(); } function reposition(xChange, yChange, strA) { // checks if target position is not blocked and if not moves the player if (mainArray[idPos.x + xChange][idPos.y + yChange].solidf0 === "false" || mainArray[idPos.x + xChange][idPos.y + yChange].solidf0 === "False" || mainArray[idPos.x + xChange][idPos.y + yChange].solidf0 === "") { mainArray[idPos.x][idPos.y].tilef0 = tile[mainArray[idPos.x][idPos.y].terrainf0]; idPos.x = idPos.x + xChange; idPos.y = idPos.y + yChange; mainArray[idPos.x][idPos.y].tilef0 = tile.player; GameLog.innerText = "You take a step to the " + strA } else { GameLog.innerText = "You can not enter " + mainArray[idPos.x + xChange][idPos.y + yChange].solidf0; } mainArray[idPos.x][idPos.y].terrainf0 != "empty" ? GameLog.innerText += "\\n There is " + mainArray[idPos.x][idPos.y].terrainf0 + " in this spot" : GameLog.innerText += "\\n There is nothing in this spot"; render(rendFlr); } //Startup initMap(32, 128); genMaps(); mainArray[idPos.x][idPos.y].tilef0 = tile.player; //First Render render(rendFlr); document.addEventListener('keydown', function(event) { if (event.keyCode === 38) { reposition(-1, 0, "North"); } if (event.keyCode === 40) { reposition(1, 0, "South"); } if (event.keyCode === 37) { reposition(0, -1, "West"); } if (event.keyCode === 39) { reposition(0, 1, "East"); } if (event.keyCode === 190) { if(rendFlr < maxlayout) {rendFlr++} render(rendFlr); } if (event.keyCode === 188) { if(rendFlr > 0) {rendFlr--} render(rendFlr); } //alert(event.keyCode); }); } gameloop();

 .info { color: #7d7d7d; font-family: Lucida Console; } .info span { color: #ABABAB; font-family: Lucida Console; font-size: 0.5em; } #GameScreen{ color: #000000; font-family: Lucida Console; font-weight: italic; margin-left: auto; margin-right: auto; } #GameLog { color: #000000; font-family: Lucida Console; }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> <meta charset="utf-8"> <title>Dungeon Valley</title> </head> <body> <br> <p class="info">Dungeon Valley.<br> <span class=""> Taming the Borderlands.<br> v0.008 By heromedel. </span> </p> <section id="GameScreen"></section> <section id="GameLog">Arrow Keys to move.<br></section> <script src="main.js"></script> </body> </html>

如果您想測試它，我建議您運行該代碼段，然后單擊全屏箭頭鍵移動 , 和 。 將改變正在渲染的樓層。

Answer 1

Barmar 的回答確定了問題，但很可能會遇到undefined錯誤，如果 mainArray[i][j] 未初始化。 所以像這樣：

for (var k = 0; k < maxlayout; k++){
       const obj = mainArray[i][j] || {};       
       obj['tilef' + k] = tile.empty;
       obj['terrainf' + k] = "empty";
       obj['solidf' + k] = "false";
       mainArray[i][j] = obj;
}

Answer 2

您正在替換數組元素而不是向其添加新屬性。

for (var k = 0; k < maxlayout; k++){
    mainArray[i][j]['tilef' + k] = tile.empty;
    mainArray[i][j]['terrainf' + k] = "empty";
    mainArray[i][j]['solidf' + k] = "false";
};