JavaScript Map實(shí)現(xiàn)原理與底層結(jié)構(gòu)詳解
前言
比如，有一天，我們?nèi)ベ徫锏曩I了一件新的、不熟悉的商品。
張三：這個(gè)商品多少錢
收銀員：（在鍵盤上噼啪作響。。。）
收銀員：88元，給你湊個(gè)整。
（滴。。。付款成功）
成功支付90元。
hash表
收銀員如何在數(shù)千件商品中如此迅速地找到這件商品的價(jià)格。
有人說可以遍歷暴力查詢，總能找到項(xiàng)目。
如果有一百萬種產(chǎn)品，需要多少時(shí)間？雖然始終可以從頭到尾查詢，但我們追求更好的性能，這就是我們的哈希表存儲。
我們需要做的就是將商品轉(zhuǎn)化為下標(biāo)形式的數(shù)字，并對應(yīng)數(shù)組的下標(biāo)，這樣下次遇到這個(gè)商品，就可以直接根據(jù)下標(biāo)獲取我們需要的信息了。
就像我們有一根香蕉?? banana（香蕉）
我們想一個(gè)辦法把它變成一個(gè)數(shù)字：
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
這里我們計(jì)算出它對應(yīng)的數(shù)字是609。
這里我們只是添加了字母對應(yīng)的ascii下標(biāo)。僅供參考和學(xué)習(xí)。一個(gè)好的哈希算法應(yīng)該盡量避免下標(biāo)過多和下標(biāo)分散過大，還要處理和解決哈希沖突。
所以我們可以將數(shù)組下標(biāo)到位置 609 并添加價(jià)格，arr[609] = 66，這里設(shè)置66元。
下次查詢香蕉的價(jià)格，還是可以通過 getHash 算出609，直接取數(shù)組的下標(biāo)就可以得到我們的價(jià)格，只需要O(1)的時(shí)間。
實(shí)現(xiàn) get 功能
function get(key){
let _hash = getHash(key);
//這里的 arr 代表我們存儲數(shù)據(jù)的數(shù)組
if(!this.arr[_hash]){
//如果沒查到數(shù)據(jù)，返回undefined
return undefined;
}
return this.arr[_hash];
}
實(shí)現(xiàn) set 功能
function set(key,value){
let _hash = getHash(key);
//這里的 arr 代表我們存儲數(shù)據(jù)的數(shù)組
this.arr[_hash] = value;
}
做個(gè)測試
class MyHash {
constructor(){
this.arr = [];
}
get(key) {
let _hash = getHash(key);
//這里的 arr 代表我們存儲數(shù)據(jù)的數(shù)組
if (!this.arr[_hash]) {
//如果沒查到數(shù)據(jù)，返回undefined
return undefined;
}
return this.arr[_hash];
}
set(key, value) {
let _hash = getHash(key);
//這里的 arr 代表我們存儲數(shù)據(jù)的數(shù)組
this.arr[_hash] = value;
}
}
let myhash = new MyHash();
myhash.set('banana', '88')
console.log(myhash.get('banana'))
到此這篇關(guān)于JavaScript Map實(shí)現(xiàn)原理與底層結(jié)構(gòu)詳解的文章就介紹到這了,更多相關(guān)JS Map內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)，Arrow?Function（箭頭函數(shù)），箭頭函數(shù)相當(dāng)于匿名函數(shù)，并且簡化了函數(shù)定義，本文重點(diǎn)給大家介紹JavaScript中的箭頭函數(shù),需要的朋友可以參考下2022-11-11
有時(shí)候我們在使用setTimeout的時(shí)候會導(dǎo)致IE特別占用cpu，有可能會導(dǎo)致死機(jī)等情況。2009-04-04
推薦4個(gè)原生javascript常用的函數(shù)
JS target與currentTarget區(qū)別說明
javascript性能優(yōu)化之分時(shí)函數(shù)的介紹
原生JS實(shí)現(xiàn)獲取及修改CSS樣式的方法
JS保留小數(shù)點(diǎn)(四舍五入、四舍六入)實(shí)現(xiàn)思路及實(shí)例
