如何在Javascript中使用对象作为默认值创建多维数组？

Question

我想创建多维数组时遇到麻烦。

我不知道为什么，但是当我想创建一个以对象作为默认值的多维数组时，我得到一个奇怪的行为。

我使用了不同的方式，例如：

• https://stackoverflow.com/a/41435124/1741027
• https://stackoverflow.com/a/28625612/1741027
• https://stackoverflow.com/a/18116922/1741027

当我想更改对象字段的任何一个时，都会出现问题。

 function matrix( rows, cols, defaultValue){ var arr = []; // Creates all lines: for(var i=0; i < rows; i++){ // Creates an empty line arr.push([]); // Adds cols to the empty line: arr[i].push( new Array(cols)); for(var j=0; j < cols; j++){ // Initializes: arr[i][j] = defaultValue; } } return arr; } var myArray = matrix(5, 5, { status: 'OK' }); myArray[2][1].status = 'NOT OK'; console.log('Strange behavior', myArray); 

更改扩展到其他位置。

有谁能够帮助我？

Answer 1

因为您一遍又一遍地存储对一个相同对象的引用，所以您具有所描述的行为。 要获取单独的对象，可以在每次需要时使用object.assign来创建defaultValue的（浅）副本：

arr[i][j] = Object.assign({}, defaultValue);

使用其他一些ES6功能，您的代码可能如下所示：

 function matrix( rows, cols, defaultValue){ return Array.from(Array(rows), row => Array.from(Array(cols), cell => Object.assign({}, defaultValue)) ); } var myArray = matrix(5, 5, { status: 'OK' }); myArray[2][1].status = 'NOT OK'; console.log('Correct behavior', myArray); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

问题是您要在矩阵的每个点分配相同的对象。 因此，如果在数组的某一点更改对象，则在所有其他点也将更改。 要解决此问题，请使用克隆函数（例如下划线或jQuery的）或为矩阵中的每个点实例化一个新对象。

Answer 3

代替

arr.push([]);
// Adds cols to the empty line:
arr[i].push( new Array(cols));

尝试

arr.push( new Array(cols));

Answer 4

对象通过它们的引用传递，因此您要为矩阵中的所有单元格分配对同一对象的引用，从而使它们成为同一对象（更改一个对象也会导致其他对象也发生更改）。 您必须复制对象。 如果您正在使用最新的ECMAScript，则可以使用Object.assign如下所示：

function matrix( rows, cols, defaultValue) {
  var arr = [];
  for(var i=0; i < rows; i++) {
      var row = [];  // create a row
      arr.push(row); // push it into the matrix

      for(var j=0; j < cols; j++) {
        row[j] = Object.assign({}, defaultValue); // copy the default value and assign it to this cell
      }
  }
    return arr;
}