JS中Map对象的创建，遍历(7种)和使用(增删改查)

intro

JS中的Object类型实际上是一种键值对映射(key-value pairs)。
但是JS中这种键值对映射有点问题：key只能为string类型。
为了和其他编程语言有相似的数据结构(如Map, Dict等)，ES6中新增了Map类型。

API

Map() 构造方法。
size 成员方法，返回map的大小。

• CRUD
  set(key, value) - Map 新增键值对/修改值(可“链式调用”)。
  has(key) - boolean 是否含有键key
  get(key) 读取
  delete(key) 删除
  clear() 清空

• 遍历相关
  map.keys() -Map Iterator 返回map的键迭代器。
  map.values() -Map Iterator 值迭代器。
  map.entries(o) -Map Iterator 键值对迭代器。

  map.forEach(callbackFn, ?thisArg) forEach()对容器中每个元素(键值对)执行callbackFn。
  callbackFn函数声明：function(value, key) {...}，注意参数顺序。

MapIterator

获取map对象的迭代器，有4种方式：
map.keys() 遍历map的keys。
map.values() 遍历values。
map.entries() 遍历map的键值对。
map[Symbl.iterator]()相当于map.entries()，也是对[key, value]进行遍历。

Map对象的7种遍历(1 + 2 * 3)

forEach()
for..of遍历keys, values, entries
iterator.next()遍历keys, values, entries

forEach()方法

map.forEach(function(value, key) {
  console.log(key, value);
})

for..of循环

keys = map.keys();
for (key of keys) {
  console.log(key);  // map.get(key)可得value值。
}

values = map.values();
for (value of values) {
  console.log(value);
}

entries = map.entries();
for ([key, value] of entries) {
  console.log(key, value);
}

利用Map Iterator对象的next()方法遍历(遍历次数为map.size)。

keys = map.keys();
for (i = 0; i < map.size; i++) {
  key = keys.next().value;       // obj.propertyName
  // key = keys.next()[value];   // obj[propertyName]
  console.log(key);
}

values = map.values();
for (i = 0; i < map.size; i++) {
  value = values.next().value;
  console.log(value);
}

entries = map.entries();
for (i = 0; i < map.size; i++) {
  entry = entries.next().value;
  console.log(entry[0], entry[1]);
}

NOTE

• Map Iterator对象每次遍历下个元素都会调用next()，一次遍历完成之后，位置并不会复原。
  所以多次遍历必须用对应的map方法(keys, values(), entries())重新获取Map Iterator对象。
  若不重新获取，则迭代器无返回值，范围undefined。

• 关于entry
entries = map.entries() 得到map对象的键值对迭代器。

entryObj = entries.next() entries.next()指向下一个键值对的对象。
entry = entryObj.value entryObj是一个对象 {value:[key, value],done:false}。
key = entry[0] value属性的值实际上是一个长度为2的数组[key, value]。
value = entry[1]

Map的使用和entry相关类型查看

map = new Map();  // 构造Map对象。
Map(0) {}
map.size  // 大小为0
0
map.set(1, "one").set(2, "two").set(3, "three");  // 增加键值对
Map(3) {1 => "one", 2 => "two", 3 => "three"}
map.size  // 大小为3
3
entries = map.entries();  // 获取键值对的`Map Iterator`对象
MapIterator {1 => "one", 2 => "two", 3 => "three"}
Object.prototype.toString.call(entries) // 类型为`MapIterator`。
"[object Map Iterator]"
entryObj = entries.next(); // 调用next()，返回一个entryObj，是个对象{value:数组, done:false}。
{value: Array(2), done: false}
Object.prototype.toString.call(entryObj)
"[object Object]"
entry = entryObj.value  // 对象的value属性是一个数组，长度为2。
(2) [1, "one"]
Object.prototype.toString.call(entry)
"[object Array]"
entry
(2) [1, "one"]
console.log(entry[0], entry[1])
VM7998:1 1 "one"

link

ES6新特性 Iterator