【js】Map遍历方法

这篇具有很好参考价值的文章主要介绍了【js】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。文章来源地址https://www.toymoban.com/news/detail-686177.html

到了这里,关于【js】Map遍历方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Js】数组(包括es6)方法大集合

    数组方法(包括es6) 1、arr.push() 从后面添加元素,返回值为添加完后的数组的长度 , 改变原数组 2、arr.pop() 从后面删除元素,只能是一个,返回值是删除的元素 ( 改变原数组 ) 3、arr.shift() 从前面删除元素,只能删除一个 返回值是删除的元素( 改变原数组 ) 4、arr.unshift(

    2023年04月16日
    浏览(37)
  • JS中操作数组的方法(涵盖ES6)

    一、常用的 JavaScript 操作数组的方法 1.push() 和 pop():在数组末尾添加或删除元素。 2.shift() 和 unshift():在数组头部删除或添加元素。 3.splice():在任意位置添加或删除元素。如果删除一个元素,则返回一个元素的数组。 如果未删除任何元素,则返回空数组。(改变原始数组)

    2024年02月05日
    浏览(42)
  • ES6: Map结构

    它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比

    2024年02月11日
    浏览(49)
  • ES6中Map集合

    Map集合是一个新的数据结构,它可以存储键值对,并且可以使用任何类型的值作为键,包括对象、数组和函数。Map也是一种可迭代的结构,可以使用for...of循环遍历。 在ES6中,我们可以使用Map构造函数来创建一个Map集合: 我们还可以在创建Map时传入一个数组,数组中包含的元

    2024年02月07日
    浏览(48)
  • ES6 Map数据结构

    ES6 提供的另一种新的引用类型的数据结构 它类似于对象,也是键值对的集合,但是 “键”的范围不限于字符串 ,各种类型的值(包括对象)都可以当作键) 以前引用类型中的 对象也是键值对的集合 但是键限于字符串 总结起来就是: Object 结构提供了“字符串—值”的对

    2024年02月07日
    浏览(37)
  • ES6: Map数据结构

    概念: 类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。 初识Map 实例的属性和方法 size:返回 Map 结构的成员总数。 Map.prototype.set(key,value) :添加key对应的value,返回 Map 结构本身。 Map.prototype.get(key) :获取key对应的

    2024年02月16日
    浏览(38)
  • ES6 new Map() 的用法

    一. 简介: Map是一个 类似于对象 的数据类型 与常规对象和Array不同的是,它是“键控集合“ 它的行为有稍许不同,并且在特定的上下文中使用,它可以提供相当大的性能优势 二. 案例 1. 定义Map 语法一:构造函数--声明时赋值         参数:a. 必须是二维数组, b.二维数

    2024年02月06日
    浏览(39)
  • js遍历map(js遍历map对象)

    var map = new HashMap(); map.put(a,1); map.put(b,2); 遍历: var key = map.keySet(); for (var i in key){  alert(map.get(key[i])); } 注:js 中使用map,要先导入一个HashMap.js文件  没要求,引入这个文件之后,可以直接使用hashmap了var map = {\\\'a\\\': \\\'aaaaa\\\',\\\'b\\\': \\\'bbbbb\\\'};for(var k in map){alert(map[k]);}可以使用

    2023年04月26日
    浏览(41)
  • ES6基础知识五:你是怎么理解ES6新增Set、Map两种数据结构的?

    如果要用一句来描述,我们可以说 Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构 什么是集合?什么又是字典? 集合 是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合 字典 是一些元素的集合。每个元素有一个称作key 的域,不同

    2024年02月16日
    浏览(37)
  • 【ES6 Map数据结构】建议日常开发操作数组时使用 new Map

    算法使用 Map 还算是不少的,日常开发也可使用 new Map 替代某些数组操作,活到老学到老 JavaScript的对象 (Object) ,本质上是键值对的集合 (Hash结构) ,但是传统上只能用字符串当作键。这给它的使用带来了很大的限制 为了解决这个问题,ES6提供了Map数据结构。它类似于对

    2024年01月17日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包