在React/ES6中迭代对象键到数组

Question

我想在es6或react中迭代键和值为数组。请检查下面的代码:

const newData = {
"id": 111,
"name": "ewfwef",
"description": "Hello"
}
const data = Object.keys(newData).forEach((item) => {console.log("item", newData[item])})

预期输出

[
{
key: id,
value: 111
}, 
{
key: name,
value: 'ewfef'
},
{
key: description,
value: 'Hello'
}
]

Answer 1

不使用forEach，您可以使用映射来获得所需的结果

const newData = {
id: 111,
name: "ewfwef",
description: "Hello",
};
const data = Object.keys(newData).map((key) => ({ key, value: newData[key] }));
console.log(data);

您可以通过两种方式添加两个键:

1)如果你不想改变结果数组，那么你可以将数组

中的元素压入。

const newData = {
id: 111,
name: "ewfwef",
description: "Hello",
};
const data = Object.keys(newData).map((key) => ({ key, value: newData[key] }));
data.push({ key: "day", value: "monday" });
data.push({ key: "week", value: "7th" });
console.log(data);

2)或者你可以在源对象

中同时使用key-value

const newData = {
id: 111,
name: "ewfwef",
description: "Hello",
day: "monday",
week: "7th",
};
const data = Object.keys(newData).map((key) => ({ key, value: newData[key] }));
console.log(data);

Answer 2

您可以使用Object.entries和map来实现这一点，

const newData = {
"id": 111,
"name": "ewfwef",
"description": "Hello"
}

const data = Object.entries(newData).map(function(item) {
return {key: item[0], value: item[1]};
});

console.log(data)