如何将Map的键转换为数组？

Question

假设我有以下地图:

let myMap = new Map().set('a', 1).set('b', 2);

根据上述内容，我想要获得['a', 'b']。我的当前解决方案看起来很冗长且可怕。

let myMap = new Map().set('a', 1).set('b', 2);
let keys = [];
for (let key of myMap)
  keys.push(key);
console.log(keys);

一定有更好的方法，不是吗？

- Lilleman

---

也许是 Array.from(Map.keys())。 - Dan D.

https://dev59.com/EWoy5IYBdhLWcg3wHaft - hamnix

@gK. 这不能与 Map 一起使用。 - pawel

Array.from(Map.values()) - 如果需要值而不是键。 - Manohar Reddy Poreddy

Answer 1

Map.keys() 返回一个 MapIterator 对象，可以使用Array.from将其转换为Array：

let keys = Array.from( myMap.keys() );
// ["a", "b"]

编辑：你也可以使用扩展语法将可迭代对象转换为数组

let keys =[ ...myMap.keys() ];
// ["a", "b"]

- pawel

---

我喜欢使用扩展运算符，但是我的 TypeScript 转译器会报 this.map.values().slice is not a function 的错误。或许我应该进行更新。 - Cody

@Cody，这是因为您的slice()调用在展开运算符之前被执行了。请尝试使用[ ... Array.from(map.values()).slice(0) ]。 - mgthomas99

TypeScript 2.7.2对于以下代码：const fooMap = new Map<number, string>(); const fooArray = [...fooMap.keys()];会显示以下错误信息：TS2461: Type 'IterableIterator<number>' is not an array type。因此，在TypeScript中不允许这种写法，需要使用Array.from代替。 - Stefan Rein

这个不再起作用了，map.keys()将返回一个空的迭代器。相反，我建议使用Objects.keys(map)，它返回一个带有键的数组。 - dleal

@dleal 你有ECMA规范的链接介绍这种不兼容的、破坏性的变化吗？如果是真的，应该添加到我的答案中。目前，在我的情况下，Object.keys(map)返回一个空数组。 - pawel

Answer 2

您可以使用展开运算符将Map.keys()迭代器转换为数组。

let myMap = new Map().set('a', 1).set('b', 2).set(983, true)
let keys = [...myMap.keys()]
console.log(keys)

- Fernando Carvajal

Answer 3

好的，让我们更全面地了解一下，对于那些不了解JavaScript中这个特性的人来说，什么是Map... MDN说:

Map对象保存键值对，并记住键的原始插入顺序。
任何值（包括对象和基本值）都可以用作键或值。

正如你所提到的，你可以使用new关键字轻松创建Map实例... 在你的情况下:

let myMap = new Map().set('a', 1).set('b', 2);

那么让我们看看...

你提到的方式是可以的，但是有更加简洁的方法...

Map 有很多方法可以使用，比如你已经用过的 set() 来分配键值...

其中一个是 keys()，它返回所有键...

在你的情况下，它将返回：

MapIterator {"a", "b"}

你可以使用ES6的方式，例如展开运算符，轻松将它们转换为数组...

const b = [...myMap.keys()];

- Alireza

Answer 4

我需要类似于Angular响应式表单的东西：

let myMap = new Map().set(0, {status: 'VALID'}).set(1, {status: 'INVALID'});
let mapToArray = Array.from(myMap.values());
let isValid = mapToArray.every(x => x.status === 'VALID');

- linfluX

Answer 5

虽然不是最好的回答，但这个技巧new Array(...someMap)在我需要同时生成键和值数组的情况下已经救了我很多次。例如，在需要基于键和值值从Map对象创建React组件时。

  let map = new Map();
  map.set("1", 1);
  map.set("2", 2);
  console.log(new Array(...map).map(pairs => pairs[0])); -> ["1", "2"]

- Tkoma

---

不幸的是，这似乎只在使用 --downlevelIteration 时有效 :( - Alaska

Answer 6

顺便提一下，如果你正在使用JavaScript对象而非Map，可以使用Object.keys(object)来返回一个键的数组。文档：链接

请注意，JS对象与Map不同，不能互换使用！

- Kevin L Xu

---

因为通常一个物品就足够了，所以点赞了。 - William Neely

Answer 7

如果您想提取键并遍历键映射，您可以在一行中同时执行这两个操作：

for (const i of Object.keys(myMap )) {
       console.log(i)
    }

- sosnus