ES6之Map使用体会

什么是Map

作为 ES6 的新增特性,Map 是一种新的集合类型,为这门语言带来了真正的键/值存储机制。

基本操作

创建-new Map

javascript 复制代码
const m = new Map()

const m1 = new Map([
  ['key1','value1'],
  ['key2','value2'],
  ['key3','value3']
])

增/改-set

c 复制代码
m1.set('key4','value4')

查-get/has

csharp 复制代码
m1.get('key1')// 'value1'
m1.has('key1')// true

删-delete/clear

go 复制代码
m1.delete('key1')// 只删除此键值对
m1.clear()// 清除所有键值对

获取键值对数量-size

arduino 复制代码
m1.size

遍历与其他操作

常规遍历(for遍历)

javascript 复制代码
// for遍历
for (let [key, value] of m) {
  console.log(key, value);
}
for (let key of m.keys()) {
  console.log(key);
}
for (let value of m.values()) {
  console.log(value);
}

map转数组

tips: 转数组之后就可以愉快的使用数组操作了

css 复制代码
[...m] // [ [ 'key1', 'value1' ], [ 'key2', 'value2' ], [ 'key3', 'value3' ] ]
[...m.keys()] // ['key1', 'key2', 'key3']
[...m.values()] // ['value1', 'value2', 'value3']

map与对象互转

javascript 复制代码
// map转对象方法
function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k, v] of strMap) {
    obj[k] = v;
  }
  return obj;
}
// 对象转map
new Map(Object.entries({}));

forEach()

ini 复制代码
m.forEach((value, key, map) => {
  console.log(value, key, map);
});
//value1 key1 Map(3) { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }
// value2 key2 Map(3) { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }
// value3 key3 Map(3) { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }

filter

javascript 复制代码
new Map([...m].filter(([k, v]) => ...));

Map vs Object

Map和Object的使用在大多数情况下没有太大的区别,但是细究其性能以及内存占用,两者还是有些许差异的。下表可以一览二者的区别。

对比项 Map Object
键名 各种类型的值(包括对象)都可以当作键 传统上只能用字符串当作键
顺序 有序 无序
内存占用 不同浏览器的情况不同,但给定固定大小的内存,Map 大约可以比 Object 多存储 50%的键/值对。 不同浏览器的情况不同,但给定固定大小的内存,Object大约可以比Map少存储50%的键/值对。
插入性能 稍快 稍慢
查找速度 键值对多:差异极小键值对少:比Object慢 键值对多:差异极小键值对少:比Map快
删除性能 对大多数浏览器引擎来说,Map 的 delete()操作都比插入和查找更快。 Map的删除性能明显优于Object。 使用 delete 删除 Object 属性的性能一直以来饱受诟病

总的来说,除了在查找速度上Object表现稍微优于Map,在内存占用,插入及删除性能等都是Map优于Object的。基于这些特点,我们可以在今后的开发中有选择地使用Map和Object。

在把 Object 当成数组使用的情况下(比如使用连续整数作为属性),浏览器引擎可以进行优化,在内存中使用更高效的布局。这对 Map 来说是不可能的。对这两个类型而言,查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作,那么某些情况下可能选择 Object 更好一些。

相关推荐
搬砖的工人几秒前
记录WinFrom 使用 Autoupdater.NET.Official 进行软件升级更新
java·前端·.net
掘根12 分钟前
【Protobuf】proto3语法详解1
开发语言·前端·javascript
IT_陈寒22 分钟前
SpringBoot 3.2新特性盘点:这5个隐藏功能让你的开发效率翻倍 🚀
前端·人工智能·后端
艾小码38 分钟前
从入门到精通:JavaScript异步编程避坑指南
前端·javascript
七度光阴;42 分钟前
Web后端登录认证(会话技术)
前端·tlias智能辅助系统
菜鸟una2 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'4 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静9 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者10 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~10 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts