JavaScript中Map遍历方法代码示例
作者：科学熊
这篇文章主要给大家介绍了关于JavaScript中Map遍历方法的相关资料,Map是一组键值对的结构,具有极快的查找速度,文中通过代码介绍的非常详细,需要的朋友可以参考下
Map 结构原生提供三个遍历器生成函数和一个遍历方法。
- Map.prototype.keys()：返回键名的遍历器。
- Map.prototype.values()：返回键值的遍历器。
- Map.prototype.entries()：返回所有成员的遍历器。
- Map.prototype.forEach()：遍历 Map 的所有成员。
需要特别注意的是，Map 的遍历顺序就是插入顺序。
const map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
上面代码最后的那个例子，表示 Map 结构的默认遍历器接口（Symbol.iterator属性），就是entries方法。
map[Symbol.iterator] === map.entries // true
Map 结构转为数组结构，比较快速的方法是使用扩展运算符（…）。
const map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); [...map.keys()] // [1, 2, 3] [...map.values()] // ['one', 'two', 'three'] [...map.entries()] // [[1,'one'], [2, 'two'], [3, 'three']] [...map] // [[1,'one'], [2, 'two'], [3, 'three']]
结合数组的map方法、filter方法，可以实现 Map 的遍历和过滤（Map 本身没有map和filter方法）。
const map0 = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
const map1 = new Map(
[...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}
const map2 = new Map(
[...map0].map(([k, v]) => [k * 2, '_' + v])
);
// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}
此外，Map 还有一个forEach方法，与数组的forEach方法类似，也可以实现遍历。
map.forEach(function(value, key, map) {
console.log("Key: %s, Value: %s", key, value);
});
forEach方法还可以接受第二个参数，用来绑定this。
const reporter = {
report: function(key, value) {
console.log("Key: %s, Value: %s", key, value);
}
};
map.forEach(function(value, key, map) {
this.report(key, value);
}, reporter);
上面代码中，forEach方法的回调函数的this，就指向reporter。
附：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"
总结
到此这篇关于JavaScript中Map遍历方法的文章就介绍到这了,更多相关js Map遍历方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！