天天看点

【javascript快速入门-基础篇】- Map和Set & iterableMap和SetMapSet iterable

Map和Set

JavaScript的默认对象表示方式

{}

可以视为其他语言中的

Map

Dictionary

的数据结构,即一组键值对。

但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。

为了解决这个问题,最新的ES6规范引入了新的数据类型

Map

var m = new Map();
var s = new Set();
           

运行上面的程序,看自己的浏览器是不是支持ES6规范。(如果不报错说明支持)

Map

Map

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

如果让Array实现给定一个名字,要查找对应的成绩,就要首先定义两个Array,然后names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。例如下面:

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];
           

如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。用JavaScript写一个Map如下:

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
           

初始化

Map

需要一个二维数组,或者直接初始化一个空

Map

Map

具有以下方法:

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
           

由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
           

Set

Set

Map

类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在

Set

中,没有重复的key。

要创建一个

Set

,需要提供一个

Array

作为输入,或者直接创建一个空

Set

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
           

重复元素在

Set

中自动被过滤:

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
           

注意数字

3

和字符串

'3'

是不同的元素。

通过

add(key)

方法可以添加元素到

Set

中,可以重复添加,但不会有效果:

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}
           

通过

delete(key)

方法可以删除元素:

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
           

 iterable

遍历

Array

可以采用下标循环,遍历

Map

Set

就无法使用下标。为了统一集合类型,ES6标准引入了新的

iterable

类型,

Array

Map

Set

都属于

iterable

类型。

具有

iterable

类型的集合可以通过新的

for ... of

循环来遍历。

for ... of

循环遍历集合,用法如下:

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);
}
           

与for in 的区别:

for ... in

循环由于历史遗留问题,它遍历的实际上是对象的属性名称。。一个

Array

数组实际上也是一个对象,它的每个元素的索引被视为一个属性。(意味着它可以像对象一样增加新的属性)

当我们手动给

Array

对象添加了额外的属性后,

for ... in

循环将带来意想不到的意外效果:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}
           

for ... in

循环将把

name

包括在内,但

Array

length

属性却不包括name在内(长度依然是3)。

【javascript快速入门-基础篇】- Map和Set & iterableMap和SetMapSet iterable

for ... of

循环则完全修复了这些问题,它只循环集合本身的元素:

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x); // 'A', 'B', 'C'
}
           

 当然还有更好的办法:

直接使用

iterable

内置的

forEach

方法,它接收一个函数,每次迭代就自动回调该函数。以

Array

为例:

'use strict';
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});
           
【javascript快速入门-基础篇】- Map和Set & iterableMap和SetMapSet iterable

Set

Array

类似,但

Set

没有索引,因此回调函数的前两个参数都是元素本身:

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});
           

Map

的回调函数参数依次为

value

key

map

本身:

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});
           

如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得

Array

element(set map 都可以在函数参数填写一个参数就代表只读取值)

var a = ['A', 'B', 'C'];
a.forEach(function (element) {
    console.log(element);
});
           

继续阅读