js中Set和Map的实例方法

2019-08-16 admin

Set集合

类似于数组,但是成员的值都是唯一的, Set本身是一个构造函数 用来生成Set数据结构 Set结构的实例方法

添加值,返回Set结构本身

const set = new Set()
set.add(1)
set.add(1)
set.add(2)
console.log(set) //Set { 1, 2 }

删除值,返回布尔值表示是否删除成功

let set = new Set()
set.add(1)
set.delete(1) //true
console.log(set) //Set {}

返回布尔值,判断Set对象中是否含有某值

let set = new Set()
set.add('hello')
set.add('world')
set.has('hello') //true
set.has(1) //false

移除所有元素,没有返回值

返回一个Iterator对象,对象按照原Set对象元素 的插入顺序返回其所有元素

let set = new Set()
set.add('hello')
set.add('world')

const keys = set.keys()
console.log(keys) //{ 'hello', 'world' }
console.log(keys.next().value) //hello
console.log(keys.next().value) //world

keys()用法一样,返回Iterator对象,返回值也与keys()一样

返回一个键值对形式的迭代器,类似[value, value]形式的数组 value是集合中的每个元素

let set = new Set()
set.add('hello')
set.add('world')

const entries = set.entries()
console.log(entries.next().value) //[ 'hello', 'hello' ]
console.log(entries.next().value) //[ 'world', 'world' ]

`Map集合

类似于对象,是键值对的集合,数据可为任意类型,与Object的区别在于 Object的键只能是字符串或者Symbols,但Map可以为任意类型,且Map 中的键值是有序的 Map结构的实例方法

设置键值对,返回整个Map()结构,若对应键已有值则覆盖原有的值

let map = new Map()
map.set('name', 'lil')
console.log(map) //{ 'name' => 'lil' }

获取key对应的键值,若没有则返回undefined

let map = new Map()
map.set('name','lil')
console.log(map.get('name')) //lil

返回布尔值,查询key是否在当前对象中

let map = new Map()
map.set('name','lil')
console.log(map.has('name')) //true
console.log(map.has('age')) //false

删除key对应的键值对,删除成功返回true否则返回false

let map = new Map()
map.set('name','lil')
console.log(map.delete('name')) //true
console.log(map) //{}

清除所有键值对,没有返回值

返回新的Iterator对象,按顺序插入Map对象中所有key

let map = new Map()
map.set('name','lil')
map.set('age','21')
map.set('gender','male')

console.log(map.keys()) //{ 'name', 'age', 'gender' }

返回新的Iterator对象,按顺序插入Map对象中所有value

let map = new Map()
map.set('name','lil')
map.set('age','21')
map.set('gender','male')

console.log(map.keys()) //{ 'lil', '21', 'male' }

返回新的Iterator对象,按顺序插入Map对象中每个元素的 [key,value]数组

let map = new Map()
map.set('name','lil')
map.set('age','21')
map.set('gender','male')

console.log(map.entries())
//{ [ 'name','lil' ],[ 'age','21' ],[ 'gender','male' ] }
  • forEach(callback,thisArg)

callback(key,value,Map)必选,对象中每个元素都要执行的回调函数

key-当前元素的键
value-当前元素的值
Map-当前正在遍历的对象

thisArg可选,回调函数执行时的this的值 forEach()返回值为undefined

let map = new Map()
map.set('name','lil')
map.set('age','21')
map.set('gender','male')

map.forEach((value, key)=> {
    console.log(key+' = '+value)
})
//name = lil
//age = 21
//gender = male

[转载]原文链接:https://segmentfault.com/a/1190000020091905

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72668.html

文章标题:js中Set和Map的实例方法

相关文章
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
回到顶部