JavaScript中如何通过键值快速查元素（Map和Set数据类型） _javascript教程

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]);

【JavaScript中如何通过键值快速查元素（Map和Set数据类型）】这样找虽然能找出来，可以如果价格的数组越长，查找的时间就越久，因为是首先找到衣服数据的索引，再在价格数组中便利查找。
使用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标准，所以还是要根据浏览器是支持使用比较好。