使用循环用对象填充数组

时间:2018-07-24 15:17:14

标签: javascript arrays

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

看起来像这样

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}之类的新对象替换数组中的对象。它创建新的对象来代替旧的对象。 我只想向现有对象添加属性。

3 个答案:

答案 0 :(得分:4)

您的数组具有对一个对象的引用。因此,正在发生的事情是您要更新相同的基础对象。如果您熟悉C,那就像拥有N个指向同一基础对象的指针一样。无论您使用哪个N指针,都将更改基本的基础对象。

const table = new Array(10)

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

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

答案 1 :(得分:1)

恕我直言,您正在寻找这样的东西:

const table = new Array(10);

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

console.log(table)
                    

使用ECMAScript-6的一种班轮解决方案:

const table = Array.from(new Array(10).keys()).map(e => ({'foo': 0, 'bar': e}))

console.log(table)

答案 2 :(得分:1)

Array.fill()取一个值并用它填充数组。 由于非原始对象(对象,数组)是通过引用传递的,因此对任何一项进行修改都会导致其余项也发生更改。

相反,您可以使用Array.from()并将对象传递给其映射功能:

const table = Array.from({length:10}, _ => ({foo:0}));

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

console.log(table);