小手一敲,让小手一敲,让JS Map现原形现原形
一一.前言前言
文章主要讲JS Map对象的用法和如何手写Map,非常适合初步学习了JS的同学,适当的学会手写JS源码的技能,对JS理解和
面试都有很大的帮助。大多数人都知道Map方法的使用,但是在网上对Map源码实现的文章很少,希望通过这篇文章可以帮助
到大家对Map方法的理解。
说在前面说在前面
Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。本文会先简
单介绍用法,再介绍手写Map,
想让Map现原形就快快花几分钟时间浏览这篇文章吧!
二二. Map方法的使用方法的使用
Map是一组键值对的结构,具有极快的查找速度。
举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array:
var names = ['lm', 'dz', 'xxy'];
var scores = [100, 90, 80];
我们需要实现这个要求,就先要遍历names数组,找到需要查询同学名字的位置,然后去scores数组中找到相应的位置,取出成
绩。这样的话有两个缺点:
数组越长,需要查询耗时越长。
如果数据很多,导入数据的时候,很容易出错。
如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,一个键(名字)和对应一个值(成绩)进行绑
定,无论这个表有多大,,也不用担心出错。用JavaScript使用Map实现如下:
var m = new Map([['lm', 100], ['dz', 90], ['xxy', 80]]);
m.get('lm'); //100
m.size();//3
m.set('xp', 90); // 添加新的key-value
m.delete('xxy'); // 删除key 'xxy'
通过Map的get方法查询到lm同学100分,用size获取有多少个键值对,用set方法添加xp的成绩,用delete方法删除xxy的成绩。
我们需要注意的是一个我们需要注意的是一个key只能对应一个只能对应一个value,多次对一个,多次对一个key放入放入value,后面的值会把前面的值冲掉:,后面的值会把前面的值冲掉:
var m = new Map();
m.set('xp', 70);
m.set('xp', 90);
m.get('xp'); // 90
三三.手写手写Map方法方法
想要手写Map方法,首先需要知道的是它ES6标准新增的数据类型,是键/值对的集合。这个数据类型,可以使用很多方法来
操作它。下面就让我们,小手一敲,让它现出原形吧~