Map的使用方法

最新推荐文章于 2025-03-18 16:57:18 发布

~且听风吟~

最新推荐文章于 2025-03-18 16:57:18 发布

阅读量5.3k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46797477/article/details/123142009

版权

本文介绍了JavaScript中的Map数据结构，包括其与Object的区别、创建、操作方法如set、get、has、delete、clear等。Map允许使用任意类型作为键，并保持插入时的顺序，支持对象作为键以及迭代方法。此外，还讲解了如何将对象转换为Map，以及Map到对象的转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Map

Map是一个键值对形式的集合，类似object，区别是Map允许任何的键（key）

Map语法
new Map() 创建map
map.set(key, value) 存储键值对
map.get（key）根据key获取value，没有返回undefined
map.has（key）key存在返回true，没有返回false
map.delete（key）根据key删除指定项
map.clear（）清空map
map.size 返回长度

const map = new Map();

map.set('1', '字符串');
map.set(1, '数字');
map.set(true, '布尔值');

console.log(map.get('1')) //字符串
console.log(map.get(1)) // 数字
console.log(map.get(true)) // 布尔值

根据上述代码我们发现与对象不同，map的键不会被转成字符串，键保存是什么类型，get就是什么类型

const obj = {a:1}
map.set(obj, '我是value')
console.log(map.get(obj))  // 我是value

在object中无法使用对象最为键使用，但是在map中对象是可以作为key使用

const obj = {a:1}
map.set(obj, '我是value').set('1', 'str').set('2', 'str1')
console.log(map.size) // 3

每次set方法都会返回map，所以我们可以进行链式调用

map.set('1', 'str').set('2', 'str2')
console.log(map.keys()) // MapIterator {'1', '2'}

map.keys()遍历返回所有的key

map.set('1', 'str').set('2', 'str2')
console.log(map.values()) // [Map Iterator] { 'str', 'str2' }

map.values() 遍历返回所有的value

map.set('1', 'str').set('2', 'str2')
console.log(map.entries()) 
// [ '1', 'str' ]
// [ '2', 'str2' ]

map.entries() 遍历返回数组，以key and value的形式

map.forEach( (value, key, map) => {
    console.log(`${key}: ${value}`);
});
/*
    1: str
    2: str2
*/

map有内部含有forEach，类似Array

map方法迭代的顺序与插入的循序相同，与object不同

const map = new Map([
    ['a', 1],
    ['b', 2],
    ['c', 3],
]);

console.log(map.get('a'), map.get('b'), map.get('c'))
// 1 2 3

创建map的时候，可以传入一个带有键值对的数组或者可迭代对象进行初始化

const obj = {
    name:'hello world', 
    age: '12'
}

const map = new Map(Object.entries(obj))
/*
  console.log(Object.entries({a:1})) 返回二维数组
*/

console.log(map.get('name'), map.get('age')) // hello world 12

通过以上方式可以将一个普通对象格式化成map格式

console.log(Object.fromEntries(map))
// { name: 'hello world', age: '12' }

通过以上方法可以将map格式的数据转换成一个普通对象