javascript - 使用循环用对象填充数组

标签 javascript arrays

我需要创建填充对象的数组。可以说{ foo: 0} 。然后我想添加属性bar每个对象具有不同的值。例如:值 = 数组中项目的索引。

看起来像这样

const table = new Array(10).fill({foo: 0});

for (let i = 0; i < table.length; i += 1) {
    table[i].bar = i;
}

我期望得到的是:

[
    { foo: 0, bar: 0 },
    { foo: 0, bar: 1 },
    { foo: 0, bar: 2 },
    ...
    { foo: 0, bar: 9 }
]

我得到了什么:

[
    { foo: 0, bar: 9 },
    { foo: 0, bar: 9 },
    { foo: 0, bar: 9 },
    ...
    { foo: 0, bar: 9 }
]

为什么会这样?我哪里出错了?

<强> DEMO

编辑 澄清一下

我不想用像 table[i] = {foo: 0, bar: i} 这样的新对象替换数组中的对象。它创建新对象来替换旧对象。 我只想向现有对象添加属性。

最佳答案

您的数组具有对单个对象的引用。所以发生的情况是,您正在更新相同的底层对象。如果您熟悉 C,这就像有 N 个指向同一个底层对象的指针。无论你操作哪个N指针,都会改 rebase 础底层对象。

const table = new Array(10)

for (let i = 0; i < table.length; i += 1) {
   table[i] = {foo: 0, bar: i}
}

这将为数组中的每个条目创建一个新对象

关于javascript - 使用循环用对象填充数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51502234/

相关文章:

php - JavaScript 正则表达式 : PHP like Callback Variable

javascript - 确定所有子元素的宽度

php - 使用 ColdFusion 将 CSV 转换为多维数组

c - 使用数组作为函数参数

python - numpy:根据多个条件将值设置为零

javascript - 检查 "href"是否为空,如果为空则附加 anchor 文本

javascript - 在运行时指定 VueJS 组件类型和属性

javascript - 在 D3js 力图中添加和删除节点

c++ - 是从动态分配的数组索引超出范围的元素有效

java - 一副牌