个性化阅读
专注于IT技术分析

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标准,所以还是要根据浏览器是支持使用比较好。

赞(0)
未经允许不得转载:srcmini » JavaScript中如何通过键值快速查元素:Map和Set数据类型

评论 抢沙发

评论前必须登录!