一文搞懂ES6中的Map和Set


Posted in Javascript onMay 20, 2019

Map

Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。构造函数Map可以接受一个数组作为参数。

Map和Object的区别

•一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值。

•Map中的键值是有序的(FIFO 原则),而添加到对象中的键则不是。

•Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。

•Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

1.Map对象的属性

•size:返回Map对象中所包含的键值对个数

1.Map对象的方法

•set(key, val): 向Map中添加新元素

•get(key): 通过键值查找特定的数值并返回

•has(key): 判断Map对象中是否有Key所对应的值,有返回true,否则返回false

•delete(key): 通过键值从Map中移除对应的数据

•clear(): 将这个Map中的所有元素删除

const m1 = new Map([['a', 111], ['b', 222]])
console.log(m1) // {"a" => 111, "b" => 222}
m1.get('a') // 111
const m2 = new Map([['c', 3]])
const m3 = new Map(m2)
m3.get('c') // 3
m3.has('c') // true
m3.set('d', 555)
m3.get('d') // 555

1.遍历方法

•keys():返回键名的遍历器

•values():返回键值的遍历器

•entries():返回键值对的遍历器

•forEach():使用回调函数遍历每个成员

const map = new Map([['a', 1], ['b', 2]])

for (let key of map.keys()) {
 console.log(key)
}
// "a"
// "b"

for (let value of map.values()) {
 console.log(value)
}
// 1
// 2

for (let item of map.entries()) {
 console.log(item)
}
// ["a", 1]
// ["b", 2]

// 或者
for (let [key, value] of map.entries()) {
 console.log(key, value)
}
// "a" 1
// "b" 2
// for...of...遍历map等同于使用map.entries()
for (let [key, value] of map) {
 console.log(key, value)
}
// "a" 1
// "b" 2

1.map与其他数据结构的互相转换

•map转换为数组(使用扩展运算符)

const arr = [[{'a': 1}, 111], ['b': 222]]

const myMap = new Map(arr)

[...myMap] // map转数组。 [[{'a': 1}, 111], ['b': 222]]
•Map与对象的互换
const obj = {}
const map = new Map(['a', 111], ['b', 222])
for(let [key,value] of map) {
 obj[key] = value
}
console.log(obj) // {a:111, b: 222}

•JSON字符串要转换成Map可以先利用JSON.parse()转换成数组或者对象,然后再转换即可。

Set

Set对象允许你存储任何类型的值,无论是原始值或者是对象引用。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set 本身是一个构造函数,用来生成Set 数据结构。Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

Set中的特殊值

Set 对象存储的值总是唯一的,所以需要判断两个值是否恒等。有几个特殊值需要特殊对待:

•+0 与 -0 在存储判断唯一性的时候是恒等的,所以不重复

•undefined 与 undefined 是恒等的,所以不重复

•NaN 与 NaN 是不恒等的,但是在 Set 中认为NaN与NaN相等,所有只能存在一个,不重复。

1.Set实例对象的属性

•size:返回Set实例的成员总数。

1.Set实例对象的方法

•add(value):添加某个值,返回 Set 结构本身(可以链式调用)。

•delete(value):删除某个值,删除成功返回true,否则返回false。

•has(value):返回一个布尔值,表示该值是否为Set的成员。

•clear():清除所有成员,没有返回值。

const mySet = new Set(['a', 'a', 'b', 1, 2, 1])
console.log(mySet) // {'a', 'b', 1, 2}
myset.add('c').add({'a': 1})
console.log(mySet) // {'a', 'b', 1, 2, 'c', {a: 1}}
console.log(mySet.size) // 6
mySet.has(2) // true

1.遍历方法

•keys():返回键名的遍历器。

•values():返回键值的遍历器。
•entries():返回键值对的遍历器。

•forEach():使用回调函数遍历每个成员。

由于Set结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。

const set = new Set(['a', 'b', 'c'])
for (let item of set.keys()) {
 console.log(item)
}
// a
// b
// c
for (let item of set.values()) {
 console.log(item)
}
// a
// b
// c
for (let item of set.entries()) {
 console.log(item)
}
// ["a", "a"]
// ["b", "b"]
// ["c", "c"]
// 直接遍历set实例,等同于遍历set实例的values方法
for (let i of set) {
 console.log(i)
}
// a
// b
// c
set.forEach((value, key) => console.log(key + ' : ' + value))
// a: a
// b: b
// c: c

1.Set 对象作用

•数组去重(利用扩展运算符)

const mySet = new Set([1, 2, 3, 4, 4])
[...mySet] // [1, 2, 3, 4]

•合并两个set对象

let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
let union = new Set([...a, ...b]) // {1, 2, 3, 4}

•交集

let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
let intersect = new Set([...a].filter(x => b.has(x))) // {2, 3} 利用数组的filter方法

•差集

let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])
let difference = new Set([...a].filter(x => !b.has(x))) // {1}

总结

以上所述是小编给大家介绍的一文搞懂ES6中的Map和Set,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 #Javascript
vue-i18n结合Element-ui的配置方法
May 20 #Javascript
JS实现选项卡效果的代码实例
May 20 #Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 #Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 #Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 #Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 #Javascript
You might like
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php输入数据统一类实例
2015/02/23 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
部队个人年终总结
2015/03/02 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript