JS里面Map的使用以及与Object的对比

Map vs Object

顺序

Object:它的对象属性是无序的,或者是说不保证有序。

Map:它的键值对是按照插入的顺序存储的,是有序的。

键的类型

Object的键是字符串或Symbol类型。

Map的键可以是任意类型。

性能

Object在频繁增删时候性能不如Map。

迭代方式

Object不能通过for...of迭代,只能通过Object.keys(obj)或者Object.values(obj) 后进行迭代。

javascript 复制代码
const obj = { a: 1, b: 2, c: 3 };
for (let key of Object.keys(obj)) {  
    console.log(key, obj[key]);
}
// output
// a 1
// b 2
// c 3
for (let val of Object.values(obj)) {  
    console.log(val);
}
// output
// 1
// 2
// 3

Map可以通过for...of迭代。也可以通过map.keys(), map.values(), map.entries() 或者键、值、键值对进行迭代。

javascript 复制代码
const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);
for (let [key, value] of map) {  
    console.log(key, value);
}
// output
// a 1
// b 2
// c 3

与JSON的结合

Object 和JSON能够很好地映射,不需额外的操作。

Map在转JSON方面就没那么友好。上面也提到了,Map的键值是可以任意类型的,所以它不能正确返回JSON格式。需要额外处理。

Map 提供了几个built-in的方法

set(key, val) 添加或更新键值元素。

get(key) 返回键对应的值。

delete(key) 删除键值对应的元素。

has(key) 判断是否存在该键。

clear() 清空所有元素。

size 返回元素数量。

keys() 返回可迭代的所有键列表。

values() 返回可迭代的所有的值列表。

entries() 返回可迭代的键值对列表。

总结

针对不同的使用场景,可以选择不同的方式,如果需要更加关注性能,需要频繁插入和删除元素,需要非字符串作为键的话,选用Map。否则可以选择Object即可。

相关推荐
gnip5 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel5 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休5 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪5 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do6 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选6 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选6 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼6 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——6 小时前
前端登录鉴权详解
前端·javascript
李姆斯6 小时前
复盘上瘾症:到底什么时候该“复盘”,什么时候不需要“复盘”
前端·后端·团队管理