Map 遍历方法和同其他数据结构进行相互转换

457 阅读2分钟

遍历方法

Map 提供了3个遍历器生成函数和一个遍历方法。其中 Map.prototype.keys() 是返回键名的遍历器,Map.prototype.values() 是返回键值的遍历器,Map.prototype.entries() 是返回成员的遍历器,Map.prototype.forEach() 是遍历成员的方法。

需要注意的是 Map 遍历的时候是按照插入的顺序进行遍历的。

const map = new Map([
  ["first", true],
  ["second", false],
]);

for (const key of map.keys()) {
  console.log(key); // first     second
}
for (const value of map.values()) {
  console.log(value); // true    false
}
for (const [k, v] of map.entries()) {
  console.log(k, v); // first true
  // second false
}

const obj = {
  print: function (key, value) {
    console.log(key, value); // first true
    // second false
  },
};
map.forEach(function (value, key,map) {
  this.print(key, value);
}, obj);

上面演示了 keys(),values() 和 entries() 的使用场景,由于返回的是遍历器,可以通过 for...of 遍历里面的值。

forEach() 方法类似于数组的 forEach(),可以在每次遍历的过程中输出 value,key,map。此外 forEach() 方法还提供第二个参数,用于指定回调函数中的 this 指向,例子中的 this.print() 就是指向了 obj 里面的 print 方法。

同其他数据结构进行互相转换

Map 同数组互相转换很方便,Map 构造函数支持传入一个数组,通过扩展运算符可以很方便的将 Map 转成数组。

const map = new Map([
  [1, true],
  [2, false],
]);

console.log([...map]); // [ [ 1, true ], [ 2, false ] ]

Map 也可以和对象进行相互转换,为了实现对应的转换需要借助 Object.entries() 和 map.entries()

const map = new Map(Object.entries({ 1: true, 2: false }));

console.log(map); // Map(2) { '1' => true, '2' => false }

function mapToObj(map) {
  let obj = Object.create(null);
  for (const [key, value] of map.entries()) {
    obj[key] = value;
  }
  return obj;
}
console.log(mapToObj(map)); // [Object: null prototype] { '1': true, '2': false }

需要注意的是,这里面是用了 Object.create(null) 创建新对象,它类似一个新的 Map,里面值不会受到 Object.prototype() 原型的干扰。

const obj1 = {};
console.log(obj1.toString()); // [object Object]

const obj2 = Object.create(null);
console.log(obj2.toString()); // TypeError: obj2.toString is not a function

小结

本文先是介绍了 Map 的 keys(),values(),entries() 生成器函数和 forEach() 方法,注意 forEach() 方法的第二个参数可以第一个回调函数参数的 this 指向。接着介绍了数组,对象与 Map 的相互转换,注意对象的键只能是字符串,而数组没有要求。

参考资料:es6.ruanyifeng.com/#docs/set-m…