前言: Array,Map 和 Set 都属于 iterable 类型
1,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
2,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"
- }
通过 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
- }
3, 遍历 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...of 循环和 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 属性却不包括在内
for...of 循环则完全修复了这些问题, 他只循环集合本身的元素
- var a = ['A', 'B', 'C'];
- a.name = 'Hello';
- for (var x of a) {
- console.log(x); // 'A', 'B', 'C'
- }
然而, 更好的方式是直接使用 iterable 内置的 forEach 方法, 他接收一个函数, 每次迭代就自动回调该函数. 以 Array 为例:
- var a = ['A', 'B', 'C'];
- a.forEach(function (element, index, array) {
- // element: 指向当前元素的值
- // index: 指向当前索引
- // array: 指向 Array 对象本身
- console.log(element + ', index =' + index);
- });
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);
- });
如果对某些参数不感兴趣, 由于 JacaScript 的函数调用不要求参数必须一致, 因此可以忽略他们, 例如: 只需要获得 Array 的 element
- var a = ['A', 'B', 'C'];
- a.forEach(function (element) {
- console.log(element);
- });
以上内容学习来源自廖雪峰老师
来源: http://www.bubuko.com/infodetail-3069759.html