JavaScript中如何通过键值快速查元素：Map和Set数据类型

JavaScript的对象中，我们知道键和值一一对应，键其实也是对象的属性，我们可以通过以下方式访问对象的属性值：

var person={
name:'小明',
age:18,
school:"第一中学"
}
console.log(person['name']);//小明

所以其实对象的属性是字符串，也就是对象的键是字符串。那么如果是数字或者其他数据类型呢？可不可以？

var person={
name:'小明',
age:18,
school:"第一中学"，
1:'1212'
}
console.log(person[1]);//Invalid or unexpected token

这种方法会出错，是无效的方法。

我们都知道数组也是对象，数组的索引就是数字，也就是键是数字，所以其实数字或者其他数据类型作为键是可以的。所以ES6设计了新的数据类型，Map来解决这一问题。

并不是所有浏览器都兼容ES6,所以在使用之前，需要在严格模式下检测一下你的浏览器是否兼容：

"use static"
var m = new Map();//创建Mao实例
var m = new Set();
console.log('兼容ES6');//兼容ES6

【Map】

Map是一组键值对的结构，具有极快的查找速度。

比如有两个数组，我们需要把这两个数组一一对应起来，只需要知道其中一个数组的元素，就马上能找出另外一个与之对应的元素，最简单的办法就是indexOf（）方法：

var clothes = ['red','blue','yellow','green','black'];
var price = [200,250,150,250,300];
var i = clothes.indexOf('green');
console.log(price[i]);

这样找虽然能找出来，可以如果价格的数组越长，查找的时间就越久，因为是首先找到衣服数据的索引，再在价格数组中便利查找。

使用Map方法是数组的元素就是一个个的键值对。找到键就马上找到值，无需找出索引再便利，所以无论数组有多长，查找的速度都很快，不受数组长度的影响。初始化Map需要一个二位数组或者一个空的Map。

例如：一下的二位数组。

var m = new Map([['red',200],['blue',250],['yellow',150],['green',250],['black',300]])
console.log(m.get('red'));//200

初始化一个空的Map：

var m1 = new Map();
m1.set(1,10);
console.log(m1)//Map(1) {1 => 10}

有上面两个例子，我们已经知道初始化一个Map的方法和Map具备的方法：get()和set()。

get()是获得键，查找值。set()是设置添加键值对给Map。除此之外，还有has(),delete(),这两个方法返回的都是boolean类型的值。

例如：

var m = new Map([['red',200],['blue',250],['yellow',150],['green',250],['black',300]]);
console.log(m.has('green'));//true
console.log(m.delete('black'));//true

因为一个键只能对应一个值，所以如果键相同，会以后面设置的为准，之前设置的会被后来的值代替。

例如：

var m1 = new Map();
m1.set(1,10);
console.log(m1)//Map(1) {1 => 10}
m1.set(1,20);
console.log(m1)//Map(1) {1 => 20}

【set】

Set和Map类似，不同的是并非所有的对象都有键值对，所以set就是没有存储value的key集合。因为键是没有重复的，所以重复的元素在set中是会被自动过滤。

例如：

var s = new Set([1,2,3,3,'4'])
console.log(s)//Set(4) {1, 2, 3, "4"}

另外，set也具备has(),delete()方法，和Map不同的是，set是通过add(key)的方式添加元素的，其他方法都一样。

例如：

var s = new Set([1,2,3,3,'4'])
console.log(s)//Set(4) {1, 2, 3, "4"}
console.log(s.add('5'))//Set(5) {1, 2, 3, "4", "5"}
console.log(s.has(1));//true
console.log(s.delete(2))//true
console.log(s)//Set(4) {1, 3, "4", "5"}

以上是ES6中Map和ser数据类型，更具具体项目操作起来应该会很容易上手，方法也简单，注意的是并不是所有浏览器都兼容ES6标准，所以还是要根据浏览器是支持使用比较好。