javascript Javascript多维数组更新特定元素

Javascript multidimensional array updating specific element

提问by Kirberry

I have a string that has been converted into an 2D Array in js.

我有一个字符串，已在 js 中转换为 2D 数组。

board = "...|.X.|...|"

board = "...|.X.|...|"

It is used to represent a game board

它用于表示游戏板

each . represents a space

每个 。代表一个空间

each | represents a row

每个| 代表一行

each X represents a wall

每个 X 代表一堵墙

EDIT: code below for the 2d array creation

编辑：下面的二维数组创建代码

var src= "...|.X.|...|";
board = src.split(/\|/g);

for (var i = 0; i < board.length; i++) {
var cells = board[i].split('');
for (var j = 0; j < cells.length; j++) {
    cells[j] = parseInt(cells[j]);
}
board[i][j] = cells;
console.log(board[1][1])
//returns 'X'

when i access board[i][j] it returns correctly:

当我访问 board[i][j] 时它会正确返回：

[0][0] = "."

[0][0] = "."

[1][1] = "X"

[1][1] = "X"

[1][2] = "."

[1][2] = "."

etc etc

等等等等

I want to update the specific element with a string representing a piece. However when i insert into an element like so:

我想用代表一块的字符串更新特定元素。但是，当我像这样插入元素时：

board[0][0] = "piece4"

board[0][0] = "piece4"

The array returns in firebug as so:

数组在 firebug 中返回，如下所示：

board = "piece4|.X.|...|"

board = "piece4|.X.|...|"

When it should look like:

什么时候应该看起来像：

board = ".piece4.|.X.|...|"

board = ".piece4.|.X.|...|"

Why are elements [0][1] and [0][2] being overwritten? Am I not understanding arrays of array index access correctly in js?

为什么元素 [0][1] 和 [0][2] 被覆盖？我在 js 中没有正确理解数组索引访问的数组吗？

采纳答案by Travesty3

PROBLEM:

问题：

I'm betting that you have a one-dimensional array with strings stored in each. So your array actually looks like:

我敢打赌你有一个一维数组，每个数组都存储了字符串。所以你的数组实际上看起来像：

array (
    [0] => '...',
    [1] => '.X.',
    [2] => '...'
)

When this is what you want:

当这是您想要的时：

array (
    [0] => array (
        [0] => '.',
        [1] => '.',
        [2] => '.'
    ),
    [1] => array (
        [0] => '.',
        [1] => 'X',
        [2] => '.'
    ),
    [2] => array (
        [0] => '.',
        [1] => '.',
        [2] => '.'
    )
)

SOLUTION:

解决方案：

When constructing your 2D array, make sure you explicitly declare each entry in boardas an array. So to construct it, your code might look something like this:

构建二维数组时，请确保将其中的每个条目显式声明board为数组。因此，要构建它，您的代码可能如下所示：

board = new Array();
rows = 3;
for (var i = 0; i < rows; i++)
    board[i] = new Array('.', '.', '.');

回答by Algoman

I just had the same problem, but it had a more complex reason and I want to add it, in case someone finds this page searching for the same problem I had:

我只是遇到了同样的问题，但它有一个更复杂的原因，我想添加它，以防有人发现此页面正在搜索我遇到的相同问题：

I had created and filled a 2-dimensional array like this:

我创建并填充了一个像这样的二维数组：

var foo = Array(n).fill(Array(n).fill(0));

which creates a 2-dimensional n*n array filled with zeroes.

它创建了一个用零填充的二维 n*n 数组。

Now when I tried to overwrite a cell like this

现在当我试图覆盖这样的单元格时

foo[1][1] = 1;

I ended up with these values:

我最终得到了这些值：

[[0,1,0],
 [0,1,0],
 [0,1,0]]

which is really surprising IMHO.

恕我直言，这真是令人惊讶。

The reason for this was, that there has only been onerow, which had internally been referencedthree times. So when I changed the first index in "the second" row, it effectively changed all rows.

这样做的原因是，有也不过才一个排，这已在内部被引用三次。因此，当我更改“第二”行中的第一个索引时，它有效地更改了所有行。

Bottom line: don't use Array.fillto create multi-dimensional arrays!

底线：不要Array.fill用于创建多维数组！

回答by CAtoOH

The situation and solution given above is pretty simple. The issue of updating specific values in a list of objects (often referred to as an array, but that's a discussion for a different time) has more practical and industrial application. The problem you tend to run into is thinking that looking at a value in a specific cell, e.g. my_array[0][0] returns 'some value' will also let you change that value through an assignment e.g. my_array[0][0] = 'new value'. You will find that depending on how you defined your array, the change shows in the same row across the columns, not what you are needing. Look at the example code as an illustration of creating, and managing a multidimensional list of objects (array).

上面给出的情况和解决方案非常简单。更新对象列表（通常称为数组，但这是不同时间的讨论）中的特定值的问题具有更多实际和工业应用。您倾向于遇到的问题是认为查看特定单元格中的值，例如 my_array[0][0] 返回“某个值”也会让您通过赋值更改该值，例如 my_array[0][0] = '新值'。您会发现，根据您定义数组的方式，更改显示在跨列的同一行中，而不是您需要的。将示例代码视为创建和管理多维对象列表（数组）的说明。

<html>
<head>
<title>JavaScript Object List/Array</title>
<script>
//Make a JavaScript array that can manage data of inventory between different locations over time.
var list_of_brands = ["BMW","Harley Davidson","Honda","Kawasaki"];
var list_of_locations = ["Dayton","Cincinnati"];

//a month of data
var DAYS_IN_A_MONTH = 30;
var calendar = [];
for(day_of_sales = 1; day_of_sales <= DAYS_IN_A_MONTH; day_of_sales++){

  //hold your locations
  var shop_location = [];//You need to create a new array for each day - that's part of the trick!

  for(location_index = 0;location_index < list_of_locations.length;location_index++){

  //set up some starting inventory
  var inventory = [];//You need to create a new array for each location - that's part of the trick!

      for(brand_index = 0; brand_index < list_of_brands.length; brand_index++){ 

        inventory[list_of_brands[brand_index]] = {"brand": list_of_brands[brand_index], "on_hand": 10,"sold": 0};

      };//end inventory loop

      shop_location[list_of_locations[location_index]] = {"city":list_of_locations[location_index],inventory};

  }//end location loop

  calendar[day_of_sales] = {"Day": day_of_sales, shop_location};

}//end calendar loop

//check your work
console.log('calendar:'); console.log(calendar);
console.log('shop_location:'); console.log(shop_location);
console.log('specific information: '); console.log(calendar[1].shop_location["Dayton"].inventory['BMW'].brand);//returns 'BMW'
console.log('change Dayton.BMW information: '); console.log(calendar[1].shop_location["Dayton"].inventory['BMW'].brand="Triumph");//change value
console.log('check work (Dayton.BMW): '); console.log(calendar[1].shop_location["Dayton"].inventory['BMW'].brand);//check work - PASS
console.log('check work (Cincinnati.BMW): '); console.log(calendar[1].shop_location["Cincinnati"].inventory["BMW"].brand);//check work other location - PASS!!

//Make some lasting and specific changes
console.log("Now make a change in the month's value over showing a sale on the 13th");
var sale_date = 13;
console.log("date of sale " + sale_date + "th");

var original_number_on_hand = calendar[sale_date].shop_location["Dayton"].inventory["BMW"].on_hand;
console.log("original_number_on_hand on that date: " + original_number_on_hand);

var number_of_units_sold = 3;
console.log("number_of_units_sold on that date: " + number_of_units_sold);

var new_inventory_level = original_number_on_hand - number_of_units_sold;
console.log("new_inventory_level: " + new_inventory_level);

for(date_index = sale_date; date_index  <= DAYS_IN_A_MONTH; date_index ++){  
  calendar[date_index].shop_location["Dayton"].inventory["BMW"].sold = number_of_units_sold;
  calendar[date_index].shop_location["Dayton"].inventory["BMW"].on_hand = new_inventory_level;
}

console.log("Show change in inventory");
  console.log(list_of_locations[0]+" has " + calendar[10].shop_location["Dayton"].inventory["BMW"].on_hand + " " + list_of_locations[1]+" has " + calendar[10].shop_location["Cincinnati"].inventory["BMW"].on_hand);
  console.log(list_of_locations[0]+" has " + calendar[11].shop_location["Dayton"].inventory["BMW"].on_hand + " " + list_of_locations[1]+" has " + calendar[11].shop_location["Cincinnati"].inventory["BMW"].on_hand);
  console.log(list_of_locations[0]+" has " + calendar[12].shop_location["Dayton"].inventory["BMW"].on_hand + " " + list_of_locations[1]+" has " + calendar[12].shop_location["Cincinnati"].inventory["BMW"].on_hand);
  console.log(list_of_locations[0]+" has " + calendar[13].shop_location["Dayton"].inventory["BMW"].on_hand + " " + list_of_locations[1]+" has " + calendar[13].shop_location["Cincinnati"].inventory["BMW"].on_hand);
  console.log(list_of_locations[0]+" has " + calendar[14].shop_location["Dayton"].inventory["BMW"].on_hand + " " + list_of_locations[1]+" has " + calendar[14].shop_location["Cincinnati"].inventory["BMW"].on_hand);
  console.log(list_of_locations[0]+" has " + calendar[15].shop_location["Dayton"].inventory["BMW"].on_hand + " " + list_of_locations[1]+" has " + calendar[15].shop_location["Cincinnati"].inventory["BMW"].on_hand);
  console.log(list_of_locations[0]+" has " + calendar[16].shop_location["Dayton"].inventory["BMW"].on_hand + " " + list_of_locations[1]+" has " + calendar[16].shop_location["Cincinnati"].inventory["BMW"].on_hand);

  //add new items to a shop's inventory
var inventory_2 =[];
for(brand_index = 0; brand_index < list_of_brands.length; brand_index++){ 

  inventory_2[list_of_brands[brand_index]] = {"brand": list_of_brands[brand_index], "on_hand": 10,"sold": 0};

};//end inventory loop
console.log("show inventory_2");console.log(inventory_2);
console.log("add inventory");inventory_2["Indian"] = {"brand": "Indian", "on_hand": 10,"sold": 0};
console.log("show updated inventory_2");console.log(inventory_2);

</script>
</head>
<body>
  <p>look in the JavaScript console for output</p>
</body>
</html>

回答by Roy Dictus

Two remarks here:

这里有两点说明：

1. Arrays start with index 0 in every dimension.
2. If you access a string as a 2D array, every element is a char rather than a string.

1. 数组从每个维度的索引 0 开始。
2. 如果将字符串作为二维数组访问，则每个元素都是字符而不是字符串。

So if you write board[0][0] = 'X';then you get the right behavior (and that changes the first character of the string, not the second).

因此，如果您编写，board[0][0] = 'X';那么您将获得正确的行为（这会更改字符串的第一个字符，而不是第二个字符）。