ES6 Map 原理
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 原理的更多相关文章
- ES6 & Map & hashMap
ES6 & Map & hashMap 01 two-sum https://leetcode.com/submissions/detail/141732589/ hashMap ht ...
- js es6 map 与 原生对象区别
区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...
- Shadow Map 原理和改进 【转】
http://blog.csdn.net/ronintao/article/details/51649664 参考 1.Common Techniques to Improve Shadow Dept ...
- ES6 map与filter
ES6 map与filter 1.map let arr1 = [1,2,3]; let arr2 = arr1.map((value,key,arr) => { console.log(val ...
- ES6 Map to Array
ES6 Map to Array function differentSymbolsNaive(str) { // write code here. const map = new Map(); co ...
- ES6 Map All In One
ES6 Map All In One Map 字典/地图 Set 集合 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...
- ES6 Map vs ES5 Object
ES6 Map vs ES5 Object Map vs Object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...
- es6 & map & set
es6 & map & set Map & WeakMap https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re ...
- 六、es6 map
一.map的特点 JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键.这给它的使用带来了很大的限制. 为了解决这个问题,ES6 提供了 ...
随机推荐
- gulp——用自动化构建工具增强你的工作流程
想要使用gulp,就要了解gulp,就像追自己的爱豆,你要知道爱豆的喜好.兴趣 简单的了解你的新爱豆———安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 ...
- spring cloud 优雅停机
spring cloud 优雅停机 大部分部署项目如果要停掉项目一般都是用kill -9 来杀进程 但是由于Eureka采用心跳的机制来上下线服务,会导致服务消费者调用已经kill的服务提供者然后出错 ...
- python中的__call__函数
简单实例: class TmpTest: def __init__(self, x, y): self.x = x self.y = y def __call__(self, x, y): self. ...
- Exception evaluating SpringEL expression:
Exception evaluating SpringEL expression:错误 说明: 在帮助同事看BUG的时候遇上了这个问题,不知道是前端还是后端的错误 在网上找了很多文章解决的方法,很多都 ...
- Vue优化:常见会导致内存泄漏问题及优化
1. 监听在window/body等事件没有解绑2. 绑在EventBus的事件没有解绑3. 模块形成的闭包内部变量使用完后没有置成null4. 使用第三方库创建,没有调用正确的销毁函数5 . ech ...
- 数据结构(十六)模式匹配算法--Brute Force算法和KMP算法
一.模式匹配 串的查找定位操作(也称为串的模式匹配操作)指的是在当前串(主串)中寻找子串(模式串)的过程.若在主串中找到了一个和模式串相同的子串,则查找成功:若在主串中找不到与模式串相同的子串,则查找 ...
- URL百分号编码
百分号编码是什么! 百分号编码(Percent-Encoding)也被称为 URL 编码,是一种编码机制.该机制主要应用于 URI 编码中,URI 包含 URL 和 URN,所以它们也同样适用.除此之 ...
- 在移动硬盘中安装win10和macos双系统
本文通过在SSD移动硬盘中安装win10和macos双系统,实现操作系统随身携带 小慢哥的原创文章,欢迎转载 目录 ▪ 目标 ▪ 准备工作 ▪ Step1. 清空分区,转换为GPT ▪ Step2. ...
- ElasticSearch head插件安装与配置
下载 下载地址:https://github.com/mobz/elasticsearch-head 安装 1. 下载到本地 git clone 2. 安装 grunt npm install -g ...
- Flask:数据库的建模
学习完模板系统,接下来要研究的就是框架对数据库的操作,不论python的那个框架,直接使用数据库API(redis.pymysql等)都可以进行操作,但是这些操作不够方便,于是就有了ORM 1.Fla ...