Javascript 数组解构和 Object.entries

Question

这很简单：Object.entriesis supposed to produce and Array of key, value pairs.。因此，我希望这段代码能够解构

[{
  id: 1,
  name: "christian"
},{
  id : 2,
  name: "bongiorno"
}].map(Object.entries).forEach(([k,v]) => console.log(`${k}: ${v}`));

投入生产：

id:1 name:christian
id:2 name:bongiorno

但事实并非如此。相反，我得到了：

id,1: name,christian
id,2: name,bongiorno

我错过了什么？

Answer 1

输出正确，但您的定义略有偏差，您缺少数组级别（数组数组）。

Object.entries 应该产生一个键值对数组。

console.log(
  Object.entries({
    id: 1,
    name: 'test'
  })
)

要实现您想要的，您只需更新您的日志以考虑嵌套数组：

[{
  id: 1,
  name: "christian"
},{
  id : 2,
  name: "bongiorno"
}]
  .map(Object.entries)
  .forEach(([k, v]) => console.log(
    `${k.join(':')} ${v.join(':')}`
  ));

或者你的意思是扁平化每个数组？：

[{
  id: 1,
  name: "christian"
},{
  id : 2,
  name: "bongiorno"
}]
  .map(Object.entries)
  .reduce((arr, curr) => arr.concat(curr), [])
  .forEach(([k,v]) => console.log(`${k}: ${v}`));
  

Answer 2

让我们尝试删除map 和forEach，看看你对每个对象做了什么：

let [k, v] = Object.entries({
  id: 1,
  name: "christian"
});
console.log(`${k}: ${v}`);

let [k, v] = Object.entries({
  id : 2,
  name: "bongiorno"
});
console.log(`${k}: ${v}`);

现在，如果我们扩展 Object.entries 调用，则变为

let [k, v] = [
  ["id", 1],
  ["name", "christian"]
];
console.log(`${k}: ${v}`);

let [k, v] = [
  ["id", 2],
  ["name", "bongiorno"]
];
console.log(`${k}: ${v}`);

这非常准确地反映了您所看到的 - k 和 v 正在分配数组。

你需要嵌套两个循环：

const arr = [{
  id: 1,
  name: "christian"
}, {
  id: 2,
  name: "bongiorno"
}];
for (const obj of arr)
    for (const [k, v] of Object.entries(obj))
        console.log(k+": "+v);