为什么 console.table() 方法只打印所有行的最后一行？

Question

我创建了一个包含六个对象的数组，每个对象具有三个属性：姓名、年龄和职业。我已经给了他们初始值。现在我有另外三个数组，每个数组有六个值​​（六个不同的名字、六个不同的年龄和六个不同的职业）。我试图通过遍历其他三个具有不同名称年龄和职业值的数组来更改初始数组中对象的属性值。我尝试在单个 for 循环、单个 while 循环和使用三个不同的循环中执行此操作。但它不工作。 console.table() 方法正在打印所有表行中循环的最后一次迭代的值（名称：supermentalist，年龄：​​40 和职业：theTwo）。

let arr = new Array(6).fill({});

for (ele of arr) {
  ele.name = "withoutCape";
  ele.age = 40;
  ele.profession = "programmer";
}

console.table(arr);

const names = [
  "superhero",
  "superzero",
  "supermum",
  "superdumb",
  "superscientist",
  "supermentalist",
];

const ages = [35, 36, 37, 38, 39, 40];

const professions = [
  "programmer",
  "scientist",
  "cryptographer",
  "etymologist",
  "theOne",
  "theTwo",
];

for (let i = 0; i < professions.length; i++) {
  arr[i]["name"] = names[i];
}

for (let i = 0; i < professions.length; i++) {
  arr[i]["age"] = ages[i];
}

for (let i = 0; i < professions.length; i++) {
  arr[i].profession = professions[i];
}

console.table(arr);

Answer 1

这不是console.table 错误。

看let arr = new Array(6).fill({});

完全一样：

let shared = {};
let arr = new Array(6).fill(shared);

所以你在每一行都放了同一个对象，所以arr[0] === arr[1] === ... 所以你总是修改一切。

改变 let arr = new Array(6).fill().map(() => ({}));

而且它有效。

让你的代码更好可能是这样的：

const names = [
  "superhero",
  "superzero",
  "supermum",
  "superdumb",
  "superscientist",
  "supermentalist",
];

const ages = [35, 36, 37, 38, 39, 40];

const professions = [
  "programmer",
  "scientist",
  "cryptographer",
  "etymologist",
  "theOne",
  "theTwo",
];

let arr = new Array(6).fill().map( (e, i) => {
    //Warning i can be greather than names/ages/professions.length
    return {
        name: names[i],
        profession : professions[i],
        age: ages[i]
    };
});
console.table(arr);

Answer 2

看到这个问题：How do I use array.fill for creating an array of objects?。您有一个对象数组，它们都引用同一个对象，因此更改一个对象会全部更改。

如果您想从new Array() 调用开始，您需要在为其分配/重新分配属性时克隆每个对象。 （或map()他的回答中提到的farvilain的单个对象。）

类似的东西...

for (let i = 0; i < professions.length; i++) {
  arr[i] = {
    ...arr[i],
    profession: professions[i]
    };
}

let arr = new Array(6).fill({});

for (ele of arr) {
  ele.name = "withoutCape";
  ele.age = 40;
  ele.profession = "programmer";
}

// Logs the original array of references
console.log(arr);

const names = [
  "superhero",
  "superzero",
  "supermum",
  "superdumb",
  "superscientist",
  "supermentalist",
];

const ages = [35, 36, 37, 38, 39, 40];

const professions = [
  "programmer",
  "scientist",
  "cryptographer",
  "etymologist",
  "theOne",
  "theTwo",
];

for (let i = 0; i < professions.length; i++) {
  arr[i] = {
    ...arr[i],
    profession: professions[i]
    };
}

// Logs the new array of cloned objects
console.log(arr);

但您可能想查看Array.from()，它实现了map() 回调作为第二个参数

Array.from({length: 6}, x => ({}))

或者直接映射您的内容数组之一...

const arr = names.map((name, i) => (
  { name: name, age: ages[i] || 40, profession: professions[i] || 'programmer'}
))