ES6之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"}

以上map和set操作数组和对象的方法虽是好用,但是他们是ES6的特性,并不是所有浏览器都兼容,不过随着ES6的广泛使用,管他呢。先用上再说。

本文为博主原创文章,知识共享,开源精神,转载注明出处。