迹忆客 专注技术分享

要将 Map 的值转换为数组：

1. 在 Map 上调用 values() 方法以获取包含 Map 中所有值的迭代器对象。
2. 调用 Array.from() 方法，将迭代器作为参数传递给它。 Array.from 方法从可迭代对象创建一个新数组。

const map = new Map();
map.set('name', 'John');
map.set('age', 30);

const values = Array.from(map.values());

console.log(values); // 👉️ ['John', 30]
console.log(values.length); // 👉️ 2

const keys = Array.from(map.keys()); // 👉️ ['name', 'age']

我们使用 Map.values 方法获取包含 Map 值的迭代器对象。

然后我们将迭代器作为调用 Array.from 方法的唯一参数传递。

Array.from 方法将可迭代对象转换为数组并返回新的数组实例。

这是使用 TypeScript 时推荐的方法，因为编译器在将扩展运算符 ... 与迭代器一起使用时经常会报错。

另一种方法是使用扩展运算符 ...。

使用扩展运算符将映射值转换为数组

将 Map 对象的值转换为数组：

1. 在 Map 上调用 values() 方法以获取包含 Map 值的迭代器对象。
2. 使用展开运算符 ... 将迭代器中的值解包到一个新数组中。

const map = new Map();
map.set('name', 'Tom');
map.set('age', 39);

const values = [...map.values()];

console.log(values); // 👉️ ['Tom', 39]
console.log(values.length); // 👉️ 2

const keys = [...map.keys()]; // 👉️ ['name', 'age']

我们使用扩展运算符 ... 将 Map 的所有值解包到一个新数组中。

这是将 Map 的值转换为数组时最常用的方法。

我们也可以使用多个 Map 对象执行此操作。

const map1 = new Map();
map1.set('name', 'Tom');

const map2 = new Map();
map2.set('country', 'Chile');

const values = [...map1.values(), ...map2.values()];

console.log(values); // 👉️ ['Tom', 'Chile']
console.log(values.length); // 👉️ 2

我们解压缩 Map 对象值的顺序保留在新数组中。