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

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

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

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

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

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

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

简单模拟Map,代码如下:

  1. function Mymap() { //构造函数
  2. this.init();
  3. }
  4. //初始化函数,创建桶(数组),每个位置都是一个对象,每个对象的属性上设置next属性,并且初始化为null。
  5. Mymap.prototype.init = function () {
  6. this.tong = new Array(8);
  7. for (var i = 0; i < 8; i++) {
  8. this.tong[i] = new Object();
  9. this.tong[i].next = null;
  10. }
  11. };
  12. //添加数据。
  13. Mymap.prototype.set = function (key, value) {
  14. var index = this.hash(key); //获取到当前设置的key设置到那个位置上
  15. var TempBucket = this.tong[index]; //获取当前位置的对象
  16. while (TempBucket.next) { //遍历如果当前对象链接的下一个不为空
  17. if (TempBucket.next.key == key) { //如果要设置的属性已经存在,覆盖其值。
  18. TempBucket.next.value = value;
  19. return; //return ,不在继续遍历
  20. } else {
  21. TempBucket = TempBucket.next; //把指针指向下一个对象。
  22. }
  23.  
  24. }
  25. TempBucket.next = { //对象的next是null ,添加对象。
  26. key: key,
  27. value: value,
  28. next: null
  29. }
  30. };

  31. //查询数据
  32. Mymap.prototype.get = function (key) {
  33. var index = this.hash(key);
  34. var TempBucket = this.tong[index];
  35. while(TempBucket){
  36. if(TempBucket.key == key){
  37. return TempBucket.value;
  38. }else{
  39. TempBucket = TempBucket.next;
  40. }
  41. }
  42. return undefined;
  43. }

  44. //删除数据
  45. Mymap.prototype.delete = function(key){
  46. var index = this.hash(key);
  47. var TempBucket = this.tong[index];
  48. while(TempBucket){
  49. if(TempBucket.next.key == key){
  50. TempBucket.next = TempBucket.next.next;
  51. return true;
  52. }else{
  53. TempBucket = TempBucket.next;
  54. }
  55. }
  56. }
    //看当前属性是否存在
  57. Mymap.prototype.has = function(key){
  58. var index = this.hash(key);
  59. var TempBucket = this.tong[index];
  60. while(TempBucket){
  61. if(TempBucket.key == key){
  62. return true;
  63. }else{
  64. TempBucket = TempBucket.next;
  65. }
  66. }
  67. return false;
  68. }
    //清空这个map
  69. Mymap.prototype.clear = function(){
  70. this.init();
  71. }
  72. //使设置的属性平均分配到每个位置上,使得不会某个链条过长。
  73. Mymap.prototype.hash = function (key) {
  74. var index = 0;
  75. if (typeof key == "string") {
  76. for (var i = 0; i < 3; i++) {
  77. index = index + isNaN(key.charCodeAt(i)) ? 0 : key.charCodeAt(i);
  78. }
  79. }
  80. else if (typeof key == 'object') {
  81. index = 0;
  82. }
  83. else if (typeof key == 'number') {
  84. index = isNaN(key) ? 7 : key;
  85. } else {
  86. index = 1;
  87. }
  88.  
  89. return index % 8;
  90. }
  91.  
  92. var map = new Mymap(); //使用构造函数的方式实例化map
  93.  
  94. 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. gulp——用自动化构建工具增强你的工作流程

    想要使用gulp,就要了解gulp,就像追自己的爱豆,你要知道爱豆的喜好.兴趣 简单的了解你的新爱豆———安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 ...

  2. spring cloud 优雅停机

    spring cloud 优雅停机 大部分部署项目如果要停掉项目一般都是用kill -9 来杀进程 但是由于Eureka采用心跳的机制来上下线服务,会导致服务消费者调用已经kill的服务提供者然后出错 ...

  3. python中的__call__函数

    简单实例: class TmpTest: def __init__(self, x, y): self.x = x self.y = y def __call__(self, x, y): self. ...

  4. Exception evaluating SpringEL expression:

    Exception evaluating SpringEL expression:错误 说明: 在帮助同事看BUG的时候遇上了这个问题,不知道是前端还是后端的错误 在网上找了很多文章解决的方法,很多都 ...

  5. Vue优化:常见会导致内存泄漏问题及优化

    1. 监听在window/body等事件没有解绑2. 绑在EventBus的事件没有解绑3. 模块形成的闭包内部变量使用完后没有置成null4. 使用第三方库创建,没有调用正确的销毁函数5 . ech ...

  6. 数据结构(十六)模式匹配算法--Brute Force算法和KMP算法

    一.模式匹配 串的查找定位操作(也称为串的模式匹配操作)指的是在当前串(主串)中寻找子串(模式串)的过程.若在主串中找到了一个和模式串相同的子串,则查找成功:若在主串中找不到与模式串相同的子串,则查找 ...

  7. URL百分号编码

    百分号编码是什么! 百分号编码(Percent-Encoding)也被称为 URL 编码,是一种编码机制.该机制主要应用于 URI 编码中,URI 包含 URL 和 URN,所以它们也同样适用.除此之 ...

  8. 在移动硬盘中安装win10和macos双系统

    本文通过在SSD移动硬盘中安装win10和macos双系统,实现操作系统随身携带 小慢哥的原创文章,欢迎转载 目录 ▪ 目标 ▪ 准备工作 ▪ Step1. 清空分区,转换为GPT ▪ Step2. ...

  9. ElasticSearch head插件安装与配置

    下载 下载地址:https://github.com/mobz/elasticsearch-head 安装 1. 下载到本地 git clone 2. 安装 grunt npm install -g ...

  10. Flask:数据库的建模

    学习完模板系统,接下来要研究的就是框架对数据库的操作,不论python的那个框架,直接使用数据库API(redis.pymysql等)都可以进行操作,但是这些操作不够方便,于是就有了ORM 1.Fla ...