我对 JavaScript 中 Array.fill() 的行为感到困惑答案

【问题标题】：I'm confused with the behavior of Array.fill() in JavaScript我对 JavaScript 中 Array.fill() 的行为感到困惑
【发布时间】：2020-06-21 04:34:27
【问题描述】：

我正在尝试使用 Array.fill 在单行代码中创建一个 nxn 棋盘

let  board = new Array(n).fill(new Array(n).fill('O'));

当我尝试修改像 board[0][0] = 'Q' 这样的第一个正方形时。它正在更改所有第 0 个索引元素和所有 n 个子数组。我的意图是

┌─────────┬─────┬─────┬─────┬─────┐
│ (index) │  0  │  1  │  2  │  3  │
├─────────┼─────┼─────┼─────┼─────┤
│    0    │ 'Q' │ 'O' │ 'O' │ 'O' │
│    1    │ 'O' │ 'O' │ 'O' │ 'O' │
│    2    │ 'O' │ 'O' │ 'O' │ 'O' │
│    3    │ 'O' │ 'O' │ 'O' │ 'O' │
└─────────┴─────┴─────┴─────┴─────┘

但是当我做 board[0][0] = 'Q'

┌─────────┬─────┬─────┬─────┬─────┐
│ (index) │  0  │  1  │  2  │  3  │
├─────────┼─────┼─────┼─────┼─────┤
│    0    │ 'Q' │ 'O' │ 'O' │ 'O' │
│    1    │ 'Q' │ 'O' │ 'O' │ 'O' │
│    2    │ 'Q' │ 'O' │ 'O' │ 'O' │
│    3    │ 'Q' │ 'O' │ 'O' │ 'O' │
└─────────┴─────┴─────┴─────┴─────┘

但是当我像这样创建数组时，它可以按预期工作

let board = [
  ['O','O','O','O'],
  ['O','O','O','O'],
  ['O','O','O','O'],
  ['O','O','O','O'],
]

??????

【问题讨论】：

fill 复制对所有元素的相同引用。你必须在上面映射
Array(n).fill().map(_ => Array(n).fill('O')); 应该可以工作。 fill 的参数始终是别名。
这能回答你的问题吗？ Array.prototype.fill() with object passes reference and not new instance

标签： javascript arrays

【解决方案1】：

试试这个：

n = 4
let toFill = 'O'

let board = new Array(n);
for(let i = 0; i < n; i++){
    board[i] = ((new Array(n)).fill(toFill))
}

console.log(board);

输出：

[
  [ 'O', 'O', 'O', 'O' ],
  [ 'O', 'O', 'O', 'O' ],
  [ 'O', 'O', 'O', 'O' ],
  [ 'O', 'O', 'O', 'O' ]
]

【讨论】：

【解决方案2】：

您正在将单个值填充到数组项中

方法：

const getGrid = n => Array.from({ length:n }).map(() => new Array(n).fill(0))

原因如下。

在做new Array(n)时，它构造了一个长度为n的数组，通过调用fill原型函数并传递一个值，它就等于：

const array = new Array(n);
const someObject = {}; // or [], or new Array(n).fill(0), the same

array[0] = someObject;
array[1] = someObject;
//...
array[n-1] = someObject

由于所有项目都指向单个对象，因此当您修改第一个项目时，您正在操作someObject，您可能会看到所有项目更改。因此，唯一的方法是在将二级数组填充到第一级时，不能使用fill 函数。

另一个提示

关于Array.from({ length:n })和new Array(n)，通过调用new Array(n)，您正在创建一个数组，其中所有项目都是empty，该数组称为sparse matrix，您不能使用.map(()=>{})来填充它。但是Array.from({length:n}) 会创建一个以undefined 为项目的数组，可以映射到其他值。

您可能希望这些作为参考：

is-javascript-a-pass-by-reference-or-pass-by-value-language

javascript-primitive-vs-reference-values

whats-the-difference-between-empty-items-in-a-javascript-array-and-undefined

【讨论】：