Set和Map是ES6新增的2种集合类型,Set在前面已经讲过。这一篇我们主要来讲一下Map。我们先来看一些Map的基本定义和描述:

1: Map是一种存储着多个键值对的有序列表
2: Map的元素的key和value可以是任何数据类型
3: 键名的等值性通过Object.is()判断,所以数字5和字符串'5'是两个独立的key

废话不多说,我们来看看Map的基本用法:
一:创建和初始化一个Map
1:创建一个空Map

let map = new Map();

以上,我们创建了一个没有元素的空Map。
2:用Array初始化Map

let map = new Map([['name', 'mike'],['age', 25]]);
map.forEach(function (value, key, map) {
    console.log(`${key}: ${value}`)
})

得到打印结果:

name: mike
age: 25

用Array初始化Map,需要一个二维数组,二维数组里面的每一个元素(也就是一个一维数组)包含2个元素,第一个元素是键值对的key,第二个元素是键值对的value。

二:Map的增
在上面的内容里,我们说到通过调用new Map()创建了一个空Map。那如果我们想要往这个map里存储数据,可以调用set(key, value)来完成:

let map = new Map();
map.set('name', 'mike');
map.set('age', 25);
map.forEach(function (value, key, map) {
    console.log(`${key}: ${value}`)
})

以上的打印得到:

name: mike
age: 25

set()方法,第一个参数为key,第二个参数为value。

三:Map的删
跟Set一样,我们也可以通过调用clear()方法来删除整个map里面的元素:

let map = new Map([['name', 'mike'],['age', 25]]);
map.clear();
console.log(map.size); // 0

四:Map的查
1: 我们可以通过has()方法来查看在map里是否存在某个键名

let map = new Map([['name', ''],['age', 0]]);
console.log(map.has('name')); //true
console.log(map.has('age'));//true
console.log(map.has('country'));//false

需要特别注意的是,has()方法只检查某个key是否存在,存在就返回true,不存在就返回false。key对应的value不会对has()方法的结果产生影响。

2: 我们可以通过get()方法来获取某个key对应的value

let map = new Map([['name', 'mike'],['age', 25]]);
console.log(map.get('name')); // mike
console.log(map.get('age')); // 25
console.log(map.get('country')); // undefined

如果获取某个不存在的key,此方法返回undefined

五:Map的减
与Set一样,我们可以调用delete(key)删除一个键值对:

let map = new Map([['name', 'mike'], ['age', 25]]);
map.delete('name');
console.log(map.size); // 1

六:Map的forEach()方法
Map当然也有forEach()方法,我们在前面的例子其实已经使用过了。forEach()方法的第一个参数(也就是一个function)接受value,key,map本身这三个参数。forEach()会按照键值对的插入顺序轮询:

let map = new Map();
map.set(2, 'lily');
map.set('name', 'dan');
map.set(1, 'mike');
map.forEach(function (value, key, mapSelf) {
    console.log(`${key}: ${value}`);
})

得到打印结果:

2: lily
name: dan
1: mike

以上,就是Map的一些基本特性和使用场景,下一篇我们讲WeakMap。


nanaistaken
583 声望43 粉丝

« 上一篇
ES6 - WeakSet
下一篇 »
ES6 - WeakMap