【问题标题】:JavaScript es 6 convert Map to json object arrayJavaScript es6 将 Map 转换为 json 对象数组
【发布时间】:2020-04-11 19:43:48
【问题描述】:

我有一个带有键和值作为 json 对象的 Map,例如

var myMap = new Map();

myMap.set('1', "mike");
myMap.set('2', "tom");

我如何通过使用 valuefullame 映射到上面 Map 中的键和值来重新构造对象模式(由于请求的 api),从而将其转换为对象数组

[{value : 1, fullName: "mike"},{value : 2, fullName: "tom"},...]

我试过了

Array.from(myMap).map(arr => ({ value: arr[0], fullName: arr[1] }));

(注意,Array.from(myMap) 会给你像数组一样的数组的结果,没有办法使用属性名正常解构

[[1, "tom", 28],[2, "mike", 30],...]

因为它首先会转换为嵌套对象数组,所以我必须通过映射的索引找到 id 和名称,例如 arr[0] 给我valuearr[1] 给我fullName...

还有其他更好的方法吗?也欢迎使用 Lodash 在这里提出建议!

【问题讨论】:

  • 那不是 JSON 对象,它只是一个对象。
  • 完全不清楚您的 Map 对象包含什么。您的 Map 声明或所需的对象数组都不是有效的语法。如果问题清楚地表明您从什么数据开始以及您想要什么数据作为结果,我们可能会在几分钟内为您提供帮助。
  • 值对象的id属性是否总是和map中的key一样?
  • 是的,假设是这样。
  • @KevDing - 这会将您的整个问题变成一个不同且非常简单的问题。您的这部分问题[[1, "tom", 28],[2, "mike", 30],...] 仍然是错误的。我什至不知道你为什么要问这个。迭代Map 对象并自己构建每个对象。这是微不足道的。它需要一个 for 循环。

标签: javascript arrays ecmascript-6 lodash


【解决方案1】:

还有其他更好的方法吗?

您可以使用Array.from 的第二个参数而不是map,并且可以对元组参数使用参数解构:

Array.from(myMap, ([value, fullName]) => ({ value, fullName }));

但是不,没有办法手动构造具有自定义属性名称 valuefullName 的对象数组。

【讨论】:

  • 这太棒了!这就是我一直在寻找的答案,除了我原来的答案,同时不得不使用硬代码索引
  • @KevDing 将索引硬编码到数组中并没有错,您知道它总是正好有两个元素。
【解决方案2】:

如果您想忽略 id 键而只获取 values,请使用

Array.from(myMap.values())

default iterator 产生包含两者的元组。

【讨论】:

  • @jfriend00 我发现这个问题有很多不一致之处,所以我认为这就是他们要找的。具有完整(且语法有效)所需结果的可执行示例会有所帮助。
【解决方案3】:

我试过 Array.from(myMap).map(arr => ({ value: arr[0], name: arr[1] })); 但这会转换成嵌套对象

您似乎只是缺少对条目元组的值部分的 .name 属性访问,仅获取名称字符串而不是整个对象:

Array.from(myMap).map(arr => ({ value: arr[0], name: arr[1].name }));
//                                                         ^^^^^

你可以通过使用参数解构语法来简化它

Array.from(myMap).map(([value, {name}]) => ({ value, name }));

【讨论】:

  • Array.from(myMap) 的结果会给你一个像[[1, "tom", 28],[2, "mike", 30],...] 这样的数组,你没有办法通过语法解构。这就是为什么我提供了我当前的解决方案,但不得不通过索引取出名称和值
  • @Bergi,对不起,我复制了错误的 Map 对象示例,现在更新请求 Map 对象
  • @KevDing 正如 jfriend 所说,编译问题时请多加注意。我已经添加了另一篇文章,希望能回答你想问的问题。
猜你喜欢
  • 1970-01-01
  • 2016-09-23
  • 2021-05-02
  • 2021-04-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-08-27
相关资源
最近更新 更多