JavaScript Map实现原理与底层结构详解
本文通过购物找零的通俗案例，解析JavaScript中Map基于哈希表的底层存储原理。详细讲解如何通过哈希算法将键值转化为数组下标，实现O(1)时间复杂度的快速读写，并展示了基础的get与set功能实现逻辑。
前言
假设一个生活场景：你走进商店购买一件全新且陌生的商品。
顾客询问：这件商品的价格是多少？
收银员操作：在键盘上快速敲击。
收银员回答：总计88元，为了方便凑整。
系统提示：支付成功。
最终实际支付金额为90元。
哈希表
收银员是如何在成千上万种商品中瞬间定位到该商品价格信息的？
一种直观的方法是遍历所有商品进行暴力查询，理论上总能找到目标。
若商品数量达到一百万种，遍历查询将消耗大量时间。尽管顺序查询可行，但为了追求更优的性能，我们引入哈希表存储机制。
核心思路是将商品映射为下标形式的数字，并与数组下标对应。这样下次查询该商品时，可直接通过下标获取信息。
例如，我们有一根香蕉（banana）。
我们需要一种方法将其转换为数字：
function getHash(str) {
let _hash = 0;
for (let i = 0; i < str.length; i++) {
const charCode = str.charCodeAt(i);
_hash += charCode;
}
return _hash;
}
console.log(getHash('banana')) //609
通过计算，得到的对应数字为609。
上述计算仅累加了字符对应的ASCII码值，此处仅供学习与参考。优秀的哈希算法应尽量避免下标过多或分布过于分散，同时需妥善处理哈希冲突问题。
因此，我们将价格存入数组下标为609的位置，arr[609] = 66，此处设定价格为66元。
下次查询香蕉价格时，通过 getHash 计算出609，直接访问数组下标即可获取价格，时间复杂度仅为O(1)。
实现 get 功能
function get(key){
let _hash = getHash(key);
//这里的 arr 代表我们存储数据的数组
if(!this.arr[_hash]){
//如果没查到数据，返回undefined
return undefined;
}
return this.arr[_hash];
}
实现 set 功能
function set(key,value){
let _hash = getHash(key);
//这里的 arr 代表我们存储数据的数组
this.arr[_hash] = value;
}
做个测试
class MyHash {
constructor(){
this.arr = [];
}
get(key) {
let _hash = getHash(key);
//这里的 arr 代表我们存储数据的数组
if (!this.arr[_hash]) {
//如果没查到数据，返回undefined
return undefined;
}
return this.arr[_hash];
}
set(key, value) {
let _hash = getHash(key);
//这里的 arr 代表我们存储数据的数组
this.arr[_hash] = value;
}
}
let myhash = new MyHash();
myhash.set('banana', '88')
console.log(myhash.get('banana'))
至此，关于JavaScript Map实现原理与底层结构的介绍完毕。如需了解更多JS Map相关内容，请查阅本站往期文章或继续阅读后续文章，感谢大家的支持！
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58