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即可。

相关推荐
daols8839 分钟前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖2 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06273 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台3 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue