在Javascript / React中将对象转换为数组

Posted 2023-02-22

【中文标题】在Javascript / React中将对象转换为数组

【英文标题】：Convert object to array in Javascript / React

【发布时间】：2017-05-20 01:41:57

【问题描述】：

使用 REST，我正在检索一个对象（JSON 格式），该对象将被转换为一个数组，以便可以将其插入表中。

这是在 React 的渲染函数中完成的。

输入从后端每 N 分钟更新一次。

如何将对象转换为数组？

我只需要值，而不是键，因为键已经预先作为列值存在于表本身中。

【问题讨论】：

您是否尝试过为这个问题编写任何代码？

【参考方案1】：

您可以使用Object#values（ECMAScript 2017），但 IE 不支持（请参阅browser's compatibility）。

注意：ECMAScript 6 规范定义了对象属性的遍历顺序。 This blog post explains the details.

const map =  a: 1, b: 2, c: 3 ;

const result = Object.values(map);

console.log(result);

如果需要支持IE，可以使用Object#keys和Array#map：

const map =  a: 1, b: 2, c: 3 ;

const result = Object.keys(map).map((key) => map[key]);

console.log(result);

【讨论】：

谢谢，假定浏览器兼容性是最新的；我认为你的第一种方法会奏效。现在我只需要看看如何从 REST api 获取数据，我在 react 中将其定义为 var tableDataMap = this.props.data.dataMap; 并需要将其传递给新的 const ，我猜是吗？沿着这些思路。

在你尝试这样做之前，学习如何在 JS 中使用异步调用。它们是承诺、生成器和异步等待，但您应该从承诺开始。

你有这些材料吗？如果可能的话。顺便说一句，`console.log(Object.values(tableDataMap));` 在浏览器控制台上生成 REST API 数据......但我很难将它们正确地放入表中。无论如何..我认为在这里写太难了。

这是一个使用 fetch 和 promise 进行异步调用的教程 - javascript Promises: Plain and Simple。

【参考方案2】：

我不确定你所说的 map 是指 Map 对象还是普通的 JS 对象。但是，为了多样化，我想提一下 Map 对象大多（可能总是）像JSON.stringify([...myMap]) 一样被字符串化。因此，如果您碰巧收到 JSON 数据中的 Map 对象，您应该执行以下操作；

var myMap = new Map().set(1,"hey").set(2,"you"),
  mapData = JSON.stringify([...myMap]),
   values = JSON.parse(mapData).map(d => d[1]);
console.log("mapData:",mapData);
console.log("values:",values);