ES6 Set 和 Map 遍历操作
作为 ES2015 的新增特性,Set
和 Map
对象大家应该很熟悉了,例如 Set
在数组去重等场景中经常会用到:
function unique(array = []) {return Array.from(new Set(array));
}
但是一般我们都是只在需要这种数据结构的时候才去创建它,在用完之后就转回数组。大家可能都认为,相比 Set
、Map
对象,还是数组操作更熟悉一些。但实际上它们本身也提供了一些遍历方法,下面我们一起来看下。
Set 对象遍历操作
Set
结构的实例有四个遍历方法,可以用于遍历成员:
Set.prototype.keys()
:返回键名的遍历器Set.prototype.values()
:返回键值的遍历器Set.prototype.entries()
:返回键值对的遍历器Set.prototype.forEach()
:使用回调函数遍历每个成员
需要特别指出的是,
Set
的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用Set
保存一个回调函数列表,调用时就能保证按照添加顺序调用。
与数组类似,Set
对象也提供 keys
、values
、entries
方法返回一个迭代器。与数组不同的是,Set
对象 没有键名,只有键值(或者说键名和键值是同一个值),所以 keys
方法和 values
方法的行为完全一致。
let set = new Set(['red', 'green', 'blue']);for (let item of set.keys()) {console.log(item);
}
// red
// green
// bluefor (let item of set.values()) {console.log(item);
}
// red
// green
// blue
下面的代码中,entries
方法返回的遍历器,同时包括键名和键值,所以每次输出一个数组,它的两个成员完全相等:
let set = new Set(['red', 'green', 'blue']);for (let item of set.entries()) {console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
Set
结构的实例默认可遍历,它的默认遍历器生成函数就是它的 values
方法。
Set.prototype[Symbol.iterator] === Set.prototype.values
// true
一个对象只要实现了
Symbol.iterator
接口,就是一个可迭代对象,可以使用for...of
遍历,或者使用扩展运算符展开
这意味着,可以省略 values
方法,直接用 for...of
循环遍历 Set
。
let set = new Set(['red', 'green', 'blue']);for (let x of set) {console.log(x);
}
// red
// green
// blue
数组扩展运算符内部使用
for...of
循环,所以也可用于Set
结构
Set
结构的实例与数组一样,也拥有 forEach
方法,用于对每个成员执行某种操作,没有返回值。
et set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9
上面代码说明,forEach
方法的参数就是一个处理函数。该函数的参数与数组的 forEach
一致,依次为键值、键名、集合本身(上例省略了该参数)。这里需要注意,Set
结构的 键名就是键值(两者是同一个值),因此第一个参数与第二个参数的值永远都是一样的。
这里可以得出一个结论,
Set
对象forEach
的回调只需要接受一个形参即可
Map 对象遍历操作
Set
对象大家都知道使用扩展运算符转为数组去遍历,这样其实也没啥问题,但是 Map
对象的遍历就五花八门了,有的用扩展运算符转数组遍历,还有的用 Object.fromEntries
转为对象去遍历:
const map = new Map([["name", 1], ["age", 2]]);// 方法一:转为数组
[...map].forEach(([key, val]) => {// ...
})// 方法二:转为对象
const obj = Object.fromEntries(map);
for (let key in obj) {if (Object.prototype.hasOwnProperty.call(obj, key)) {// ...}
}
这边推荐使用第一种方法,直接遍历数组简单直接,不用担心遍历到对象原型上
实际上 Map
对象也提供了一些用于遍历的方法,下面我们来看下。
Map
结构原生提供三个遍历器生成函数和一个遍历方法。
Map.prototype.keys()
:返回键名的遍历器。Map.prototype.values()
:返回键值的遍历器。Map.prototype.entries()
:返回所有成员的遍历器。Map.prototype.forEach()
:遍历 Map 的所有成员。
需要特别注意的是,Map 的遍历顺序就是插入顺序。
使用 keys
和 values
:
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"
使用 entries
:
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
结构的默认遍历器接口(Symbol.iterator
属性)是 entries
方法。
map[Symbol.iterator] === map.entries
// true
这意味着 Map
结构可以直接使用 for...of
遍历:
// 等同于使用map.entries()
for (let [key, value] of map) {console.log(key, value);
}
// "F" "no"
// "T" "yes"
顺便提一下,用扩展运算符将 Map
结构转为数组,实际上就是 for...of
调用 entries
方法返回的迭代器:
const map = new Map([[1, 'one'],[2, 'two'],[3, 'three'],
]);[...map]
// [[1,'one'], [2, 'two'], [3, 'three']][...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']][...map.keys()]
// [1, 2, 3][...map.values()]
// ['one', 'two', 'three']
此外,Map
还有一个 forEach
方法,与数组的 forEach
方法类似,也可以实现遍历。
map.forEach(function(value, key, map) {console.log("Key: %s, Value: %s", key, value);
});
参考
Set 和 Map 数据结构 - 阮一峰 ES6 教程
ES6 Set 和 Map 遍历操作相关推荐
- Java 集合List、Set、HashMap操作二(Map遍历、List反向、Set删除指定元素,集合只读、TreeMap操作、List转Array、List移动元素)
Map遍历 import java.util.Map; import java.util.HashMap; import java.util.HashSet; import java.util.Ite ...
- 【ES6】Set Map数据结构、Iterator遍历器
Set() Set类似于数组,但是成员的值都是唯一的,没有重复的值.Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); let arr = [2, 3, ...
- 【Java Map集合 之 hashMap工作常用遍历操作】
集合关系图 1.文章前介 日常工作中常用的集合有ArrayList.HashMap和HashSet.前两者在开发中更是广为使用.本章主要介绍的是Map下HashMap 在日常工作中的遍历操作.将会以容 ...
- 第十七节:ES6新增的Map和WeakMap 又是什么东西?
上节介绍了Set和WeakSet,这节咱就讲Map和WeakMap是什么?当然,两者之前并没什么必然的联系,仅仅是用法类似. 什么是Map 介绍什么是Map,就不得不说起Object对象,我们都知道O ...
- React map遍历点击获取key
React map遍历点击获取key值 在使用react的时候不免需要遍历循环出dom,这时候可以通过点击过去产生的的每个dom的标识来操作 首先准备一个需要遍历循环的集合,可以是键值对,也可以是数组 ...
- Java数据结构Map遍历和排序
map结构和list结合很好用,基本的遍历和排序每次都要查一下,用的不熟练,这里汇总下map的基本遍历和排序,参考的代码如下: package com.vip;import java.util.Arr ...
- map遍历删除异常:ConcurrentModificationException
1. map集合单个删除 此时,一般都不会出问题,直接 remove(key) 2. map集合遍历删除多个 此时,若不注意往往容易出现问题,出现 ConcurrentModificationExce ...
- go语言map遍历时删除是安全的, 且可以完全删除
结论: map遍历时删除操作是完全的,且可以完全删除指定的元素 实验结果如下图: 代码如下: package main import ("fmt" ) func main() {x ...
- go语言 sync.map遍历时删除可以全部删除
结论: sync.map遍历时删除操作是完全的,且可以完全删除指定的元素 实验结果下图: 代码如下: package mainimport ("fmt""sync&quo ...
最新文章
- leetcode 刷题 119. 杨辉三角II
- Linux 文件和目录的属性及权限
- retrofit 解析百度地图api 返回数据_阿里二面:关于 Retrofit 你知道多少?看完你的offer稳了
- C++的文件读写以及python的文件读写
- 更新sql语句 sql注入_SQL更新语句– SQL中的更新查询
- Dropout和BN层的模式切换
- 机器学习——下采样(under-sampling)
- Learun,一款专注于业务,不用写代码的框架
- 智能优化及其相关算法
- spring mvc 配置使用定时任务
- 暗影精灵2pro装Linux系统,暗影精灵2不支持linux双系统吗?
- Word下划线怎么打?速速get这5个实用方法!
- 东莞女德班被责令停办 学员被遣散并退回学费
- 无线AP和无线路由器区别 wifi热点
- 拍沪牌服务器响应,上海虹口代拍沪牌费用,百兆光线实时响应
- 灰鸽子--木马、后门实验
- NestedScrollView/ScrollView嵌套Recyclerview,导致Recyclerview抢占焦点,置顶了, 修改好后,引起Edittext又不能点击问题处理
- 常见的希腊字母及读音
- mac系统python配置
- 经典游戏服务器端架构
热门文章
- MyBatis批量insert map集合
- Excel VLOOKUP实用教程之 05 vlookup如何从列表中获取最后一个值?(教程含数据excel)
- 如何使用 Python 实现网页自动化朗读?
- 环氧树脂在物联网设备 PCB 制造中的多种作用
- UP对战平台DOTA全图 炸图 踢人
- ChatGPT带火的百万年薪职业究竟是什么?
- 吴宗宪恶搞徐静蕾宋祖德黄健翔李湘
- 饥荒进别人房间服务器无响应,饥荒黑科技:能秒杀大多数BOSS的BUG,终因太强而被修复...
- 一本通c语言在线测评答案,51单片机典型项目实战全能一本通(C语言版)(视频版)最新章节_张毅刚著_掌阅小说网...
- Android ANR问题总结(非原创)