Javascript 数组解构和Object.entries

Question

非常简单：Object.entries is 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);

Javascript 数组解构和Object.entries

Javascript array de-structuring and Object.entries

javascript

destructuring

ecmascript-6