ES6之Set方法与Map方法
ES6提供了新的数据结构——Set与Map,Set本身是一个构造函数且成员的值是唯一的,没有重复的值!!!Set()是一个存储已排序的无重复元素的数据而Map()是一对数据Map()使用关键值Key来标识每一个成员且Map()的value的值是可以重复的。
var a = new Set([1,1,2,2,3,4,5]);
console.log([...a]); //[ 1, 2, 3, 4, 5 ]
console.log(a.size); //
var a = new Set();
a.add(1);
a.add(1).add(2);
console.log(a); //Set { 1, 2 }
console.log(a.size); //
2.为Set删除某值使用delete()方法,该方法返回的是一个布尔值,表示是否删除成功。
var a = new Set();
a.add(1);
a.add(1).add(2);
console.log(a); //Set { 1, 2 }
console.log(a.size); //
a.delete(1);
console.log(a); //Set { 2 }
console.log(a.size); //
3.判断一个参数是否为Set参数可以使用has()方法,该方法会返回一个布尔值。
var a = new Set();
a.add(1);
a.add(1).add(2);
console.log(a.has(1)); //true
console.log(a); //Set { 1, 2 }
console.log(a.size); //
a.delete(1);
console.log(a.has(1)); //false
console.log(a); //Set { 2 }
console.log(a.size); //
4.如果想清除所有Set的值那么使用clear()方法,该方法无返回值。
var a = new Set([1,2]);
console.log(a.size); //
a.clear();
console.log(a); //Set {}
console.log(a.size); //
第二大类:Set遍历操作,一共有四种方法,其实这四种方法本质上就是一个key:value对。
let set = new Set(['red', 'green', 'blue']);
for ( let item of set.keys() ){
console.log(item);
} // red green blue
for ( let item of set.values() ){
console.log(item);
} // red green blue
for ( let item of set.entries() ){
console.log(item);
} // ["red", "red"] ["green", "green"] ["blue", "blue"]
set.forEach(function (values) {
console.log(values);
}); //red green blue
Map示例的方法有两大类:操作方法(增删查清)和遍历方法,下面就分别说下这两大类的方法。
第一大类:Map操作方法(与Set方法类似但是没有add只有get方法读取Map)
var map = new Map([["name", "张三"], ["title", "Author"]]);
console.log(map.size); //
console.log(map.has("name")); //true
console.log(map.has("age")); //false
console.log(map.get("name")); //张三
console.log(map.delete("name")); //true
console.log(map.has("name")); //false
console.log(map.size); //
map.clear();
console.log(map.get("age")); //undefined
console.log(map.size); //
第二大类:Map遍历操作
var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var key of myMap.keys()) {
console.log(key); //0 1
}
for (var value of myMap.values()) {
console.log(value); //zero one
}
for (var item of myMap.entries()) {
console.log(item[0] + " = " + item[1]); //0 = zero 1 = one
}
myMap.forEach(function(value, key) {
console.log(key + " = " + value); }, myMap); //0 = zero 1 = one
最后简单的说下weakset与weakmap,他与set类似的有WeakSet()该方法无法遍历也没有size属性,他的成员只能是对象而不能是其他类型的值,他有三个方法.add()、.has()和.delete()方法,顺便说下如果WeakSet()方法没有被其他对象所引用那么就会被垃圾回收,与他类似的有WeakMap()。
ES6之Set方法与Map方法的更多相关文章
- es6的map()方法解释
es6的map()方法解释 map方法的作用不难理解,即“映射”,也就是原数组被“映射”成对应新数组.下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arr ...
- js 自带的 map() 方法
1. 方法概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 2. 例子 2.1 在字符串中使用map 在一个 String 上使用 map 方法获取字符串中 ...
- 模拟jquery实现each方法和map方法
********************each方法********************** function each( obj, cbk ) { /* * 实现思路: * 1.首先却分传入进来 ...
- map() 方法
1. 方法概述 map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. 2. 例子 2.1 在字符串中使用map 在一个 String 上使用 map 方法获取字符串中每 ...
- 数组map方法与如何使用ES5实现
数组map方法与如何使用ES5实现 JavaScript Array map() 方法 定义 map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值. map() 方法按照原始数 ...
- Mapper类/Reducer类中的setup方法和cleanup方法以及run方法的介绍
在hadoop的源码中,基类Mapper类和Reducer类中都是只包含四个方法:setup方法,cleanup方法,run方法,map方法.如下所示: 其方法的调用方式是在run方法中,如下所示: ...
- ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries...
2015年6月17日 ECMAScript 6发布正式版本 前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
- 关于ES3、ES5、ES6以及ES7所有数组的方法(api)的总结
起因:工作用经常用到操作数组的方法,这里进行一下总结,我尽量以简洁的语言概括每个方法(api)的作用.如果您想快速定位,可以Control+F 然后搜相应的方法即可定位 :) ES3的数组方法 joi ...
- 【Javascript】JS遍历数组的三种方法:map、forEach、filter
前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...
随机推荐
- Redis Save 与 BGSAVE 的区别
一,save保存数据到磁盘的方式: Redis Save 命令执行一个同步保存操作,将当前 Redis 实例的所有数据快照(snapshot)以 RDB 文件的形式保存到硬盘. 语法redis Sav ...
- 你好 JSONP !!!!
跨域与JSONP ==JSONP是解决跨域问题的一种常见方式== ==跨域问题==:因为浏览器有同源策略,所以当不同域间进行数据交互的时候就会出现跨域问题 ···· 同源策略:只有在同协议,同域名,同 ...
- 如何在 Centos7 中安装 nginx
1. 添加 nginx 的 yum 源(官网安装说明) vi /etc/yum.repos.d/nginx.repo 在该文件中添加如下内容: [nginx]name=nginx repobaseur ...
- 【smart-transform】取自 Atom 的 babeljs/coffeescript/typescript 智能转 es5 库
简介 有时间研究下开源库的源码,总是会有些收获的.注意到 Atom 插件编写时,可以直接使用 babel, coffeescript 或者 typescript.有些诧异,毕竟 Electron 中内 ...
- css实现六边形图片(最简单易懂方法实现高逼格图片展示)
不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...
- margin、padding单位百分比
年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/,里面有一道题目涉及到了margin和padding单位为百分比的情况.写出来记录一下以防止自己忘记. <! ...
- # WPF动画速率效果
在WPF中使用动画的情况非常多,而要让动画变得生动往往要使用一些变速动画,WPF也内置了很方便的缓动函数来实现这一功能. 除此之外,WPF还有关键帧动画,利用关键帧动画能够很好的控制动画的细节,与美工 ...
- mvc约定
mvc是围绕一些基于约定的默认项,这写默认项在必要时可以覆盖,这个概念通常成为"约定优于配置". 比如没必要在web.config中设置views,models等文件夹的名称,已经 ...
- Android破解学习之路(三)——Android游戏 切水果破解
经过前两篇破解教程,想必大家也是明白了破解的简单流程了. 先对APP进行试用,了解APP运行的大概流程,之后从APP中找出关键字(一般的关键字差不多都是支付失败),之后使用Androidkiller进 ...
- Windows下编译nginx-rtmp-module
http://nginx.org/en/docs/howto_build_on_win32.html 官网上的操作说明. 官网的方法Nginx编译方法,思路是一致的,只是有几个细节地方需要调整. 需要 ...