es6 map与set
set
定义: Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用,Set对象是值的集合,你可以按照插入的顺序迭代它的元素。Set中的元素只会出现一次,即 Set 中的元素是唯一的
Set本身是一个构造函数,用来生成 Set 数据结构
语法:
let set = new Set([1, 1, 2, 2])console.log(...set)
属性:size 返回长度
console.log(new Set([1,2,1,2]).size) // 2
操作方法:
- add(value): 向集合中添加一个新的项
- delete(value): 从集合中删除一个值
- has(value): 如果值在集合中存在,返回ture, 否则返回false
- clear(): 移除集合中的所有项
let set = new Set()
set.add(1)
set.add(2)
set.add(2)
set.add(3)
console.log(set) // {1,2,3}
set.has(2) // true
set.delete(2)
set.has(2) // false
set.clear()
遍历方法
- keys(): 返回键名的遍历器
- values(): 返回键值的遍历器
- entries(): 返回键值对的遍历器
- forEach(): 使用回调函数遍历每个成员
let set = new Set([1,2,3,4])
// 由于set只有键值,没有键名,所以keys() values()行为完全一致
console.log(Array.from(set.keys())) // [1,2,3,4]
console.log(Array.from(set.values())) // [1,2,3,4]
console.log(Array.from(set.entries())) // [[1,1],[2,2],[3,3],[4,4]]
set.forEach((item) => { console.log(item)}) // 1,2,3,4
应用场景
// 数组去重
let arr = [1, 1, 2, 3];
let unique = [... new Set(arr)];
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 intersect = [...new Set([...a].filter(x => b.has(x)))]; [2,3]
// 差集
let difference = Array.from(new Set([...a].filter(x => !b.has(x)))); [1]
map
Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for...of 循环在每次迭代后会返回一个形式为[key,value]的数组
Map
的使用场景
Map
和Object
很类似,但Map
有一个比较特殊的应用场景。如果你在开发时不确定键值对里面的键的名称,那么你需要用Map
。举例来说,你需要动态地从MongoDB
里获取键值并显示给用户,但也许你并不关心这些键值的键名到底是什么,那么在这种情况下,你可以用Map
,例如这样:var myMap = new Map();var keyObj = {},keyFunc = function () { return 'hey'},keyString = "a string";myMap.set(keyString, "value associated with 'a string'"); myMap.set(keyObj, "value associated with keyObj"); myMap.set(keyFunc, "value associated with keyFunc");console.log(myMap.get(keyFunc));
语法
let map = new Map()
map.set('name', 'vuejs.cn');
console.log(map.get('name'))
属性 size: 返回 Map 结构的元素总数
let map = new Map()
map.set('name', 'vuejs.cn');
console.log(map.size) // 1
console.log(new Map([['name','vue3js.cn'], ['age','18']]).size) // 2
操作方法
- set(key, value): 向 Map 中加入或更新键值对
- get(key): 读取 key 对用的值,如果没有,返回 undefined
- has(key): 某个键是否在 Map 对象中,在返回 true 否则返回 false
- delete(key): 删除某个键,返回 true, 如果删除失败返回 false
- clear(): 删除所有元素
let map = new Map()
map.set('name','vue3js.cn')
map.set('age','18')
console.log(map) // Map {"name" => "vuejs.cn", "age" => "18"}
map.get('name') // vue3js.cn
map.has('name') // true
map.delete('name')
map.has(name) // false
map.clear() // Map {}
遍历方法
- keys():返回键名的遍历器
- values():返回键值的遍历器
- entries():返回所有成员的遍历器
- forEach():遍历 Map 的所有成员
let map = new Map()
map.set('name','vue3js.cn')
map.set('age','18')
console.log([...map.keys()]) // ["name", "age"]
console.log([...map.values()]) // ["vue3js.cn", "18"]
console.log([...map.entries()]) // [['name','vue3js.cn'], ['age','18']]
// name vuejs.cn
// age 18
map.forEach((value, key) => { console.log(key, value)})
类型的转换
- Map 转为 Array
// 解构
const map = new Map([[1, 1], [2, 2], [3, 3]])
console.log([...map]) // [[1, 1], [2, 2], [3, 3]]
// Array.from()
const map = new Map([[1, 1], [2, 2], [3, 3]])
console.log(Array.from(map)) // [[1, 1], [2, 2], [3, 3]]
- Array 转为 Map
const map = new Map([[1, 1], [2, 2], [3, 3]])
console.log(map) // Map {1 => 1, 2 => 2, 3 => 3}
- Map 转为 Object
// 非字符串键名会被转换为字符串
function mapToObj(map) { let obj = Object.create(null) for (let [key, value] of map) { obj[key] = value } return obj
}
const map = new Map().set('name', 'vue3js.cn').set('age', '18')
mapToObj(map) // {name: "vue3js.cn", age: "18"}
- Object 转为 Map
let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj))
es6 map与set相关推荐
- es6 map()和filter()详解【转】
本文转载自: https://www.cnblogs.com/zxyun/p/7019631.html 作者:zxyun 转载请注明该声明. 原文地址:http://www.zhangxinxu.co ...
- ES6 Map数据结构
Map JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键.这给它的使用带来了很大的限制. ES6 提供了 Map 数据结构.它类似于对 ...
- es6 Map、Set和Array.from()
使用Map.Set.Array.from都需要支持es6的浏览器才能使用. 一.Map: 1.Map是一组键值对的结构,具有极快的查找速度. 2.格式类似于一个二维数组. var m = new Ma ...
- ES6——Map和WeakMap
ES6 提供了新的数据结构 Map. 它有九个常用方法: 通过键检查元素是否存在 has(key) 添加元素 set(key , value) 通过键移除元素 delete(key) 通过键获取值 g ...
- es6 Map,Set 和 WeakMap,WeakSet
这些是新加的集合类型,提供了更加方便的获取属性值的方法,不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的.同时,在进行属性值添加与获取时有专门的get,set ...
- es6 --- map的使用
思路: 1.使用一个map数组来保存nums1中出现的元素及其次数. 2.遍历nums2.使用map的has方法来检测nums2中的元素是否出现在map中,若出现则加入返回数组(retArr),且ma ...
- ES6 Map和Set的用法笔记
一.Map 1.概念:Map用来保存键值对,类似于字典类型.任意值(对象或者原始值)都可以作为一个键或者一个值. 2.Maps 和 Objects 用法比较 Object对象的键只能是字符串或者 Sy ...
- ES6 Map对象的使用
转自: https://blog.csdn.net/u012664198/article/details/97373751 Map对象保存键值对,任何值(对象或者原始值) 都可以作为一个键或一个值 k ...
- map与weakmap,ES6 Map和WeakMap有什么区别?
Looking this and this MDN pages it seems like the only difference between Maps and WeakMaps is a mis ...
最新文章
- apache ab压力测试工具-批量压测脚本
- c++强大还是python强大-Python 到底是强类型语言,还是弱类型语言?
- Java Hibernate模板 学习总结
- Fiddler的常用功能(Web断点调试)
- 【万字长文详解】Python库collections,让你击败99%的Pythoner
- centos 7 五笔安装
- [物理学与PDEs]第2章第2节 粘性流体力学方程组 2.6 一维粘性热传导流体动力学方程组...
- sql 注入神器sqlmap 源码分析之调试sqlmap
- 噪音 - Perlin Noise
- python类定义的讲解_python面向对象、自定义类等使用实例讲解
- 用CSS的float和clear创建三栏液态布局的方法(转载)
- html if语句多条件,nginx if多条件判断的实现
- HDOJ 3507 Print Article(DP + 斜率优化)
- python语音信号处理(一)
- javaScript-力扣-题库-11. 盛最多水的容器
- nodejs ---- 起步
- 2022南阳理工计科ACM计科TC招新热身赛题解
- 第一章 初步认识数据透视表
- STM32 CANbootloader 升级功能开发(3)逻辑功能开发
- 河南大学计算机专业就业率,2021考研择校择专业:河南大学就业率和薪酬情况...
热门文章
- mysql 语句 集锦_mysql 语句集锦
- python回车换行怎么不行_使用Python编写换行符时避免写入回车'\r'
- 幅度响应怎么计算_四电平脉冲幅度调制(PAM4)信号的误码分析
- 从放牛娃到北大博士,这篇论文后记刷屏
- 高校再陷版权纷争:MATLAB遭禁用后,又一基础软件严查盗版
- 图灵登上英国50英镑新钞,AI之父荣耀比肩英国女王
- 宁滨院士生前最后一场学术报告
- 【待解答】文件目录可以利用foreach边遍历边删除操作,为什么?
- Vim升华之树形目录插件NERDTree安装图解
- Impala 调用Hbase 报错 LeaseException