首页 > 解决方案 > 在 React/ES6 中将对象键迭代到数组

问题描述

我想将键和值迭代为 es6 中的数组或做出反应。请在下面检查我的代码:

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'
  }
]

标签: javascriptreactjsecmascript-6

解决方案


您可以使用地图而不是使用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);


推荐阅读