ES6的Map的键可以是任意的数据结构,并且不重复。

那么map的底层原理是啥呢?

Map利用链表,hash的思想来实现。

首先,Map可以实现删除,而且删除的数据可以是中间的值。而链表的优势就是在中间的任意位置添加,删除元素都非常快,不需要移动其他元素,直接改变指针的指向就可以。

而在存储数据很多的情况下,会导致链条过长,导致查找效率慢,所以我们可以创建一个桶(存储对象的容器),根据hash(把散列的值通过算法变成固定的某值)来平局分配数据,防止链条过长。

如下图:桶里面有3个位置,每一个位置都是一个对象,通过next属性指向下一个对象来把没有关联的对象联到一起。

把Map属性值和属性名都存到对象的值里。

简单模拟Map,代码如下:

function Mymap() {  //构造函数
this.init();
}
//初始化函数,创建桶(数组),每个位置都是一个对象,每个对象的属性上设置next属性,并且初始化为null。
Mymap.prototype.init = function () {
this.tong = new Array(8);
for (var i = 0; i < 8; i++) {
this.tong[i] = new Object();
this.tong[i].next = null;
}
};
//添加数据。
Mymap.prototype.set = function (key, value) {
var index = this.hash(key); //获取到当前设置的key设置到那个位置上
var TempBucket = this.tong[index]; //获取当前位置的对象
while (TempBucket.next) { //遍历如果当前对象链接的下一个不为空
if (TempBucket.next.key == key) { //如果要设置的属性已经存在,覆盖其值。
TempBucket.next.value = value;
return; //return ,不在继续遍历
} else {
TempBucket = TempBucket.next; //把指针指向下一个对象。
} }
TempBucket.next = { //对象的next是null ,添加对象。
key: key,
value: value,
next: null
}
};

//查询数据
Mymap.prototype.get = function (key) {
var index = this.hash(key);
var TempBucket = this.tong[index];
while(TempBucket){
if(TempBucket.key == key){
return TempBucket.value;
}else{
TempBucket = TempBucket.next;
}
}
return undefined;
}

//删除数据
Mymap.prototype.delete = function(key){
var index = this.hash(key);
var TempBucket = this.tong[index];
while(TempBucket){
if(TempBucket.next.key == key){
TempBucket.next = TempBucket.next.next;
return true;
}else{
TempBucket = TempBucket.next;
}
}
}
//看当前属性是否存在
Mymap.prototype.has = function(key){
var index = this.hash(key);
var TempBucket = this.tong[index];
while(TempBucket){
if(TempBucket.key == key){
return true;
}else{
TempBucket = TempBucket.next;
}
}
return false;
}
//清空这个map
Mymap.prototype.clear = function(){
this.init();
}
//使设置的属性平均分配到每个位置上,使得不会某个链条过长。
Mymap.prototype.hash = function (key) {
var index = 0;
if (typeof key == "string") {
for (var i = 0; i < 3; i++) {
index = index + isNaN(key.charCodeAt(i)) ? 0 : key.charCodeAt(i);
}
}
else if (typeof key == 'object') {
index = 0;
}
else if (typeof key == 'number') {
index = isNaN(key) ? 7 : key;
} else {
index = 1;
} return index % 8;
} var map = new Mymap(); //使用构造函数的方式实例化map map.set('name','zwq');
map.get('name');
map.has('name);

ES6 Map 原理的更多相关文章

  1. ES6 & Map & hashMap

    ES6 & Map & hashMap 01 two-sum https://leetcode.com/submissions/detail/141732589/ hashMap ht ...

  2. js es6 map 与 原生对象区别

    区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

  3. Shadow Map 原理和改进 【转】

    http://blog.csdn.net/ronintao/article/details/51649664 参考 1.Common Techniques to Improve Shadow Dept ...

  4. ES6 map与filter

    ES6 map与filter 1.map let arr1 = [1,2,3]; let arr2 = arr1.map((value,key,arr) => { console.log(val ...

  5. ES6 Map to Array

    ES6 Map to Array function differentSymbolsNaive(str) { // write code here. const map = new Map(); co ...

  6. ES6 Map All In One

    ES6 Map All In One Map 字典/地图 Set 集合 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...

  7. ES6 Map vs ES5 Object

    ES6 Map vs ES5 Object Map vs Object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...

  8. es6 & map & set

    es6 & map & set Map & WeakMap https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re ...

  9. 六、es6 map

    一.map的特点 JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键.这给它的使用带来了很大的限制. 为了解决这个问题,ES6 提供了 ...

随机推荐

  1. python-url中中文编码与解码

    接口测试中遇到这种情况:get请求的传参有中文,以致url中有中文编码. 下面是常见的一种编码解码方式: from urllib.request import quote, unquote url = ...

  2. 百万年薪python之路 -- 模拟三次账号登录锁定功能

    用代码实现三次用户登录及锁定(选做,时间充足建议做一做) 项目分析: 一.首先程序启动,显示下面内容供用户选择: 1.注册 2.登录 a.用户选择登录的时候,首先判断用户名在userinfo.txt表 ...

  3. Class constructor FileManager cannot be invoked without 'new'

    bug:今天项目重新安装依赖打包的时候出现错误:Class constructor FileManager cannot be invoked without 'new' 解决:尝试了很多种解决方案, ...

  4. 函数基础(三) 装饰器\闭包 day 12

    目录 昨日回顾 可变长参数 * ** 函数对象 函数嵌套 名称空间和作用域 今日内容 闭包函数 装饰器 语法糖 装饰器模板 迭代器 昨日回顾 可变长参数 * *形参:接受多余的位置实参 *实参(可迭代 ...

  5. Andriod Studio设置类默认签名模板

  6. video1

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. $.ajax.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...

  8. 快速搭建spring boot2.0 项目

    快速搭建spring boot2.0+mybatis+thymeleaf 项目 使用工具STS 3.9.7(eclipse) 首先创建一个spring boot2.0项目(具体创建方法就不写了) 然后 ...

  9. js实现一个简单的链式操作

    如何实现一个链式操作 function person() {} person.prototype = { setname: function(name) { this.name = name retu ...

  10. 四、docker 仓库(让我们的镜像有处可存)

    前言 前面讲完了docker 镜像和容器,以及通过Dockerfile 定制属于我们自己的镜像,那那现在就是需要将我们自己定制的镜像存放到仓库中供他们使用.这一套流程才算是正式走完了.从获取镜像,操作 ...