ES5-ES6-ES7_集合Set和Map
集合的概念
集合是一组无序且唯一(元素不能重复)的项组成的。这个数据结构使用了与有限集合相同的数学概念,应用在计算机的数据结构中 特点:key和value相同,没有重复的value
Set集合
ES6提供了数据结构set,它类似于数组,但是成员的值都是唯一的,没有重复的值 。Set 本身是一个构造函数,用来生成 Set 数据结构
Set数据结构的创建——Set方法里可以指定参数,也可以不指定参数(参数是一个数组)
const s1 = new Set();
const s2 = new Set([1,2,3,4]); console.log(s1) // Set {}
console.log(s2) // Set { 1, 2, 3, 4 }
Set类的属性——获取Set类中有几个数据
const s1 = new Set();
const s2 = new Set([1,2,3,4]); console.log(s1.size) //
console.log(s2.size) //
Set类的方法—Set.add(value)——Set.add(value) 添加一个数据,返回Set结构本身
成员的值都是唯一的,没有重复的值,所以在后面添加相同的值到set结构中是无效的
s1.add('a').add('b');
console.log(s1) //Set { 'a', 'b' } s2.add('c')
console.log(s2); //Set { 1, 2, 3, 4, 'c' } s2.add(1);
console.log(s2); //已经有相同的值了,所以添加无效还是原来的 Set { 1, 2, 3, 4, 'c' }
Set类的方法—Set.delete(value) set.delete(value) 删除指定数据,返回一个布尔值,表示删除是否成功
const s2 = new Set([1,2,3,4]); var ba1 = s2.delete(1)
var ba2 = s2.delete('c') console.log(ba1); //true
console.log(ba2); //false
console.log(s2); //Set { 2, 3, 4 }
Set类的方法—Set.has(value)——判断该值是否为set的成员,返回一个布尔值
const s = new Set([1,2,3,4]); const bs1 = s.has(1);
const bs2 = s.has('a');
console.log(bs1,bs2); //true false
Set类的方法—Set.clear()——清除所有的数据,没有返回值
const s = new Set([1,2,3,4]); s.clear();
console.log(s); // Set {}
Set的遍历器——keys() 返回键名的遍历器,values() 返回键值的遍历器,entries() 返回键值对的遍历器,forEach() 使用回调函数遍历每个成员
const s = new Set([1,2,3,4]); console.log(s.keys()); // SetIterator { 1, 2, 3, 4 }
console.log(s.values()); //SetIterator { 1, 2, 3, 4 }
console.log(s.entries()); //SetIterator { [ 1, 1 ], [ 2, 2 ], [ 3, 3 ], [ 4, 4 ] } //该方法可以接收三个参数,分别是:键值,健名,set本身
s.forEach(function(value,key,set){
console.log(value+'lina');
console.log(set)
})
利用Set为数组去重——直接将要给数组放入到,set的的构造方法中即可
const arr = [1,2,3,45,2,3,4,13,5,7,1,3,2] const s = new Set(arr); console.log(s); // Set { 1, 2, 3, 45, 4, 13, 5, 7 }
console.log(arr); //[ 1, 2, 3, 45, 2, 3, 4, 13, 5, 7, 1, 3, 2 ] console.log([...s]);//将set转成数组,结果是[ 1, 2, 3, 45, 4, 13, 5, 7 ]
Map数据结构
Map数据结构概述 字典:是用来存储不重复key的Hash结构,不同于集合(Set)的是,字典使用的是[键,值]的形式来存储数据的
JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
创建Map和Map类的属性——获取Map类中有几个数据
const m = new Map([
['a',1],
['b',2]
]); console.log(m); //Map { 'a' => 1, 'b' => 2 }
console.log(m.size); //
Map类的方法—set(key,value) 设置键名key对应的键值为value,然后返回整个Map结构,如果key已经有值,则键值会被更新,否则就生成该键
Map类的方法—get(key)——get方法读取key对应的键值,如果找不到key,返回undefined
const m = new Map([
['a',1],
['b',2]
]); m.set('miaov','ketang').set('xing','huang');//因为返回的是Map结构本身,所以可以使用调用链的方式
console.log(m);//Map { 'a' => 1, 'b' => 2, 'miaov' => 'ketang', 'xing' => 'huang' } m.set('b',5);//有相同的key,值会被覆盖
console.log(m); //Map { 'a' => 1, 'b' => 5, 'miaov' => 'ketang', 'xing' => 'huang' } console.log(m.get('b')); //
console.log(m.get('c')); //undefined
Map类的方法—delete(key) 删除某个键,删除成功放回true,如果删除失败,返回false
const m = new Map([
['a',1],
['b',2]
]); console.log(m.delete('b'));//true
console.log(m.delete('c'));//false
console.log(m);//Map { 'a' => 1 }
Map类的方法—has(key) 方法返回一个布尔值,表示某个键是否在当前Map对象之中
Map类的方法—clear() 清楚Map结构中的所有数据,没有返回值
const m = new Map([
['a',1],
['b',2]
]); console.log(m.has('b'));//true
console.log(m.has('c'));//false m.clear();
console.log(m);//Map {}
Map的遍历器 keys() 返回键名的遍历器;values() 返回键值的遍历器;entries() 返回键值对的遍历器;forEach() 使用回调函数遍历每个成员
const m = new Map([
['a',1],
['b',2],
['c',3]
]); console.log(m.keys());//MapIterator { 'a', 'b', 'c' }
console.log(m.values()); //MapIterator { 1, 2, 3 }
console.log(m.entries()); //MapIterator { [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] } //该方法可以接收三个参数:值,键,Map本身
m.forEach(function (value, key, Map) {
console.log(value);
console.log(key);
})
Map在使用过程中的一些注意事项一两个NaN本身是不相等的,但在Map结构中,NaN作为键的话,视为相等的(同一个键)
const map = new Map();
map.set(NaN,1);
map.set(NaN,2); console.log(map); //Map { NaN => 2 }
Map在使用过程中的一些注意事项二 如果Map结构中的key是一个对象的情况下,每个对象都是不同的键,即使是两个空的对象,因为两个对象的地址值不同,以后引用别人的插件,使用对象作为键,就能避免同名碰撞的情况
const map = new Map(); map.set({},'x').set({},'y'); console.log(map); //Map { {} => 'x', {} => 'y' }
Map 结构转为数组结构——比较快速的方法是使用扩展运算符(...)。
const m = new Map([
['a',1],
['b',2]
]); console.log([...m.keys()]); //[ 'a', 'b' ]
console.log([...m.values()]); //[ 1, 2 ]
console.log([...m.entries()]); //[ [ 'a', 1 ], [ 'b', 2 ] ]
console.log([...m]); //[ [ 'a', 1 ], [ 'b', 2 ] ]
数组结构转为Map结构——将数组传入 Map 构造函数,就可以转为 Map
const arr = [[1,'one'],[2,'two'],[3,'three']]; const map = new Map(arr); console.log(map);//Map { 1 => 'one', 2 => 'two', 3 => 'three' }
Map结构转为对象——如果所有 Map 的键都是字符串,它可以转为对象
const myMap = new Map(); myMap.set('yes', true)
myMap .set('no', false);
console.log(myMap); //Map { 'yes' => true, 'no' => false } const obj = strMapToObj(myMap);
console.log(obj); //{ yes: true, no: false } function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
对象转为Map结构
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
} const map = objToStrMap({yes: true, no: false});
console.log(map); //Map { 'yes' => true, 'no' => false }
Map结构转为JSON对象 Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。 需要先将其转成对象
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
} function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
} let myMap = new Map().set('yes', true).set('no', false);
console.log(strMapToJson(myMap)); //{"yes":true,"no":false}
另一种情况是,Map 的键名有非字符串,这时可以选择转为数组 JSON
function mapToArrayJson(map) {
return JSON.stringify([...map]);
} let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
console.log(mapToArrayJson(myMap)); //[[true,7],[{"foo":3},["abc"]]]
JSON转为Map结构——JSON 转为 Map,正常情况下,所有键名都是字符串
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
} function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
} console.log(jsonToStrMap('{"yes": true, "no": false}')); //Map { 'yes' => true, 'no' => false }
有一种特殊情况,整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为Map。这往往是数组转为 JSON 的逆操作。
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
} console.log(jsonToMap('[[true,7],[{"foo":3},["abc"]]]')); //Map { true => 7, { foo: 3 } => [ 'abc' ] }
ES5-ES6-ES7_集合Set和Map的更多相关文章
- ES6 新增集合----- Set 和Map
Sets 和数组一样,都是一些有序值的的集合,但是Sets 和数组又有所不同,首先Sets 集合中不能存有相同的值,如果你向Sets 添加重复的值,它会忽略掉, 其次Sets 集合的作用也有所不同,它 ...
- ES6中的Set和Map集合
前面的话 在ES6标准制定以前,由于可选的集合类型有限,数组使用的又是数值型索引,因而经常被用于创建队列和栈.如果需要使用非数值型索引,就会用非数组对象创建所需的数据结构,而这就是Set集合与Map集 ...
- 【读书笔记】【深入理解ES6】#7-Set集合和Map集合
ES6新标准中将Set集合和Map集合添加到JS中. ES5中Set集合和Map集合 在ES5中,开发者们用对象属性来模拟这两种集合. var set = Object.create(null); s ...
- ES6 - Note6:Set与Map
Set和Map是ES6中新增的数据结构,Set是集合,无序唯一,Map类似于对象,也是"key-value"形式,但是key不局限于字符串. 1.Set的用法 Set是构造函数,可 ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- Java集合框架之map
Java集合框架之map. Map的主要实现类有HashMap,LinkedHashMap,TreeMap,等等.具体可参阅API文档. 其中HashMap是无序排序. LinkedHashMap是自 ...
- 第19章 集合框架(3)-Map接口
第19章 集合框架(3)-Map接口 1.Map接口概述 Map是一种映射关系,那么什么是映射关系呢? 映射的数学解释 设A,B是两个非空集合,如果存在一个法则,使得对A中的每一个元素a,按法则f,在 ...
- 简述ES5 ES6
很久前的某一天,一位大神问我,你知道ES6相对于ES5有什么改进吗? 我一脸懵逼的反问,那个啥,啥是ES5.ES6啊. 不得不承认与大神之间的差距,回来深思了这个问题,结合以前的知识,算是有了点眉目. ...
- 【JAVA集合框架之Map】
一.概述.1.Map是一种接口,在JAVA集合框架中是以一种非常重要的集合.2.Map一次添加一对元素,所以又称为“双列集合”(Collection一次添加一个元素,所以又称为“单列集合”)3.Map ...
- 十七、Java基础---------集合框架之Map
前两篇文章中介绍了Collection框架,今天来介绍一下Map集合,并用综合事例来演示. Map<K,V> Map<K,V>:Map存储的是键值对形式的元素,它的每一个元素, ...
随机推荐
- DataTable和List互转
/// <summary> /// list转datatable /// </summary> /// <typeparam name="T"> ...
- 人工智能第三课:数据科学中的Python
我用了两天左右的时间完成了这一门课<Introduction to Python for Data Science>的学习,之前对Python有一些基础,所以在语言层面还是比较顺利的,这门 ...
- 正则表达式之 \b
引用网上一段话: \b 是正则表达式规定的一个特殊代码(好吧,某些人叫它元字符,metacharacter),代表着单词的开头或结尾,也就是单词的分界处.虽然通常英文的单词是由空格,标点符号或者换行来 ...
- mysql全文索引之模糊查询
旧版的MySQL的全文索引只能用在MyISAM表格的char.varchar和text的字段上. 不过新版的MySQL5.6.24上InnoDB引擎也加入了全文索引,所以具体信息大家可以随时关注官网, ...
- 谈谈MySQL支持的事务隔离级别,以及悲观锁和乐观锁的原理和应用场景?
在日常开发中,尤其是业务开发,少不了利用 Java 对数据库进行基本的增删改查等数据操作,这也是 Java 工程师的必备技能之一.做好数据操作,不仅仅需要对 Java 语言相关框架的掌握,更需要对各种 ...
- mapper代理开发步骤
1:先写Mapper接口,UserMapper.java 2:然后遵循4条开发规范,写映射文件,UserMapper.xml 3:将映射文件,UserMapper.xml加入到SqlMapConfig ...
- 使用Linux的Crontab定时执行PHP脚本
0 */6 * * * /home/kdb/php/bin/php /home/kdb/apache/htdocs/lklkdbplatform/kdb_release/Crontab/index.p ...
- crontab工具安装和检查
什么是crontab?crontab 是一个用于设置周期性执行任务的工具 重启crond守护进程 systemctl restart crond 查看当前crond状态 systemctl statu ...
- JavaScript 基础(四) - HTML DOM Event
HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下 ...
- 洛谷P3379 【模板】最近公共祖先(LCA)(树链剖分)
题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...