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

红太狼 2022-03-01 11:06 3689阅读 0赞

## 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"

![Map使用和entry相关类型查看][Map_entry]

## link ##

[ES6新特性 Iterator][ES6_ Iterator]

[Map_entry]: /images/20220301/6dd831e5ba3c443cbf19cc5cc48fb1c4.png
[ES6_ Iterator]: https://blog.csdn.net/wuyujin1997/article/details/89225066