JavaScript Map实现原理与底层结构详解
更新时间：2022年09月26日 11:15:37 作者：十九（一拖再拖）
哈希表（也称为哈希表）是一种基于键直接访问内存存储位置的数据结构。也就是说，它通过计算一个键值函数来加速查找，该函数将要查询的数据映射到表中的某个位置。该映射函数称为散列函数，记录数组称为散列表
前言
比如，有一天，我们去购物店买了一件新的、不熟悉的商品。
张三：这个商品多少钱
收银员：（在键盘上噼啪作响。。。）
收银员：88元，给你凑个整。
（滴。。。付款成功）
成功支付90元。
hash表
收银员如何在数千件商品中如此迅速地找到这件商品的价格。
有人说可以遍历暴力查询，总能找到项目。
如果有一百万种产品，需要多少时间？虽然始终可以从头到尾查询，但我们追求更好的性能，这就是我们的哈希表存储。
我们需要做的就是将商品转化为下标形式的数字，并对应数组的下标，这样下次遇到这个商品，就可以直接根据下标获取我们需要的信息了。
就像我们有一根香蕉🍌 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
ES6标准新增了一种新的函数，Arrow Function（箭头函数），箭头函数相当于匿名函数，并且简化了函数定义，本文重点给大家介绍JavaScript中的箭头函数,需要的朋友可以参考下2022-11-11
有时候我们在使用setTimeout的时候会导致IE特别占用cpu，有可能会导致死机等情况。2009-04-04
微信小程序如何利用getCurrentPages进行页面传值
这篇文章主要介绍了微信小程序如何利用getCurrentPages进行页面传值,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了推荐4个原生javascript常用的函数,需要的朋友可以参考下2015-01-01
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。2011-08-08
本篇文章主要介绍了javascript性能优化之分时函数的介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家介绍了Javascript事件的捕获方式和冒泡方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了原生JS实现获取及修改CSS样式的方法,结合实例形式简单分析了JavaScript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-09-09
保留两位小数：将浮点数四舍五入，取小数点后2位；如：2，会在2后面补上00.即2.00，感兴趣的朋友看下具体的实现思路及代码2013-04-04
正则表达式在我们日程的工作项目中,应该是一个经常用到的技能,在做一些字符的匹配和处理的过程中,发挥了很大的作用,这篇文章主要给大家介绍了关于js正则表达式常用方法的相关资料,需要的朋友可以参考下2024-05-05
最新评论