se5中的set与map

在est5中开发者使用对象属性来模拟。set多用于检查键的存在,map多用于提取数据。

{
let set = Object.create(null)
set.foo = true;
//检查属性是否存在
if (set.foo) {
//其他操作
} let map = Object.create(null);
map.foo = '一个值';
let val = map.foo; console.log('map-->:', val); //map-->:一个值'
}

在简单情况下将对象作为map和set来使用都是可行的,但是一旦接触到对象属性的局限性,此方式就会遇到更多的麻烦。

{
let map1 = Object.create(null),
key1 = {},
key2 = {}; map1[key1] = 'foo';
console.log('key2-->:', map1[key2]); let map2 = Object.create(null);
map2.count = 1;
//是想检查count的存在,还是非零值?
if (map2.count) {
//...
}
}

map1[key1]和map1[key2]引用了同一个值。由于对象属性只能是string,又因为对象默认的string表达形式是'[object object]'。导致key1和key2被转换为同一个字符串。map2中count的用法存在歧义。该if语句内的代码都会被执行因为1被隐式转换为true。然而count的值为0则会被隐式转为false。在大型应用中这类问题都是难以确认,难以调试的。这也是新增set和map类型的原因。set类型是一种无重复值的有序列表。set允许对它包含的数进行快速访问,从而更有效的追踪各种离散值。

创建set类型

使用new set()来创建。调用add()方法向集合中添加元素,访问集合的size属性获取集合数量。

{
let set = new Set(); set.add(5);
set.add('5');
console.log('typeof set-->:', typeof set)
console.log('set-->:', set)
console.log('size-->:', set.size)
}

set不会使用强制类型转换来判断值是否重复,这意味着set可以同时包含number(5)和string(5),唯一的例外-0和+0在set中被判定是相等的,如果向set集合中添加多个对象,则他们之间彼此独立。

{
let set = new Set();
let key1 = {};
let key2 = {}; set.add(key1);
set.add(key2);
console.log('typeof setobject-->:', typeof set)
console.log('setobject-->:', set)
console.log('size-->:', set.size)
}

由于key1和key2不会被转换为字符串,所以在set内部是不同的项,如果他们被转化为字符串,那么都会等于"[object object]",如果多次调用add()并传入相同的值作为参数。那么后续的调用会被忽略。

{
let set = new Set(); set.add(5);
set.add('5');
set.add(5);
console.log('typeof set-->:', typeof set)
console.log('set-->:', set)
console.log('size-->:', set.size)
}

第二次重复传入numner(5)并不会被添加到set集合中,那么size的属性值还是为2。也可以使用数组来初始化set集合。集合同样会过滤重复的值。

{
let set = new Set([1, 2, 3, 4, 5, 5, 5, 5, 5, 5]);
console.log('size-->:', set.size);
}

通过has()可以检测set集合中是否存在某个值。

{
let set = new Set(); set.add(5);
set.add('6');
console.log('set has-->:', set.has(6));
console.log('set has-->:', set.has('6'))
console.log('set has-->:', set.has(5))
console.log('set has-->:', set.has('5'))
}

set集合中相同的number和sting并不会返回true。调用delete()方法可以移除set中的某一个值,调用clear()方法可以移除所有值。

{
let set = new Set(); set.add(5);
set.add('6');
console.log('set has-->:', set.has('6'));
set.delete('6')
console.log('set has-->:', set.has('6'))
console.log('size-->:', set.size)
set.clear();
console.log('size-->:', set.size)
}

set集合简单易用,可以有效的跟踪多个独立有序的值。

set的forEach

set集合和数组的forEach类似,运行机制也比较类似。forEach()方法的回调接收3个参数:
1.集合中索引的位置。
2.被遍历参数的值
3.集合本身

{
let set = new Set(['a', 'b', 'c', 'd', 'e']);
set.forEach((k, val, owner) => {
console.log('set-forEach-k-->:', k);
console.log('set-forEach-val-->:', val);
console.log('set-forEach-owner-->:', owner);
})
}

将set转换为数组

将数组转换为set集合的过程很简单,需要给set集合传入数组即可。将集合转回数组,只需要使用展开运算符即可。

{
let arr = [1, 2, 3, 4, 5, 5, 5, 5, 5, 5];
let set = new Set(arr);
let newArr = [...set];
//ps: 代码行数太多可以压缩下
let newArr2 = [...new Set([1, 2, 3, 4, 5, 5, 5, 5, 5, 5])];
console.log(newArr, newArr2)
}

创建map类型

map类型是键值对的有序列表,键和值都可以是任意类型,可以调用set()方法传递一个键和一个关联的值,来给马屁添加项;此后使用键名来调用get()方法获取对应的值。

{
let map = new Map();
map.set('title', 'es6');
map.set('year', 2016); console.log('map-title-->', map.get('title'))
console.log('map-year-->', map.get('year'))
}

map的方法

map和set共享了几个方法。以下的方法和属性map和set上都存在:
1.forEach(val, k, owner): 遍历map
2.has(key):判断指定的键值是否存在
3.delete(key):移除map中键以及对应的值
4.clear():移除map中所有的键和值
5.size:指明包含多个键值对。

{
let map = new Map();
map.set('title', 'es6');
map.set('year', 2016); map.forEach((val, k, owner) => {
console.log('map-forEach-k-->:', k);
console.log('map-forEach-val-->:', val);
console.log('map-forEach-owner-->:', owner);
})
console.log('map-size-->:', map.size); console.log('map-has-->:', map.has('title')); map.delete('title');
console.log('map-->:', map); map.clear();
console.log('map-->:', map);
}

小结

es6正式将set与map引入。在此之前往往使用对象来模拟,但是由于与对象属性有关的限制,这么做会经常遇到问题。
这里并没有弱引用weakset和weakmap,有这方面需要的可以自己去查阅

es6-Set与Map的更多相关文章

  1. ES6学习:Map结构的目的和基本用法

    Map结构的目的和基本用法 JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键.这给它的使用带来了很大的限制.   1 2 3 4 5 6 7 8 ...

  2. ES6 Set 和 Map

    ES5 模拟Set 与 Map 集合 Set 常用于检查对象中是否存在某个键名 Map集合常被用于获取已存的信息 所有对象的属性名必须是字符串,那么必须确保每个键名都是字符串类型且在对象中是唯一的 数 ...

  3. ES6 中的 Map和Set

    集合的概念以及和数组的区别 其实数组也是集合, 只不过数组的索引是数值类型.当想用非数值类型作为索引时, 数组就无法满足需要了. 而 Map 集合可以保存多个键-值对(key-value), Set ...

  4. js ES6 Set和Map数据结构详解

    这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下   本 ...

  5. es6 Set 和Map 数据结构

    ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个数据结构,用来生成Set 数据结构. const s = new Set(); [2,3,5,4 ...

  6. ES6中的Map集合(与java里类似)

    Set类型可以用来处理列表中的值,但是不适用于处理键值对这样的信息结构.ES6也添加了Map集合来解决类似的问题 一.Map集合 JS的对象(Object),本质上是键值对的集合(Hash结构),但是 ...

  7. ES6新增的Map和WeakMap 又是什么玩意?非常详细的解释

    上一篇文章讲了set和weakSet,这节咱就讲Map和weakMap是什么?这两篇文章并没有什么联系,主要知识用法类似而已.嘿嘿,是不是感觉舒服多了. 什么是Map 介绍什么是Map,就不得不说起O ...

  8. ES6之前模拟Map数据结构的写法

    在ES6之前JavaScript 里面本身没有map对象,但是用JavaScript的Array.Object来模拟实现Map的数据结构. 现在已经有Map对象了,这里记录一下之前的写法 Array方 ...

  9. es6入门7--Set Map数据结构

    本文作为ES6入门第十三章的学习整理笔记,可能会包含少部分个人的理解推测,若想阅读更详细的介绍,还请阅读原文ES6入门 一.set数据结构 1.set不接受重复值 ES6新增了Set构造函数用于创建s ...

  10. ES6 Set和Map集合(六)

    一.Set集合创建Set实例:let set = new Set();1.特性:a.Set本身是一个构造函数,用来生成Set数据结构[类比数组结构]b.Set函数可以接受具有Iterable接口的数据 ...

随机推荐

  1. MySQL第一讲概论

    MySQL 后期内容 Python 今日内容概要 MySQL的概念 数据库软件的安装及使用 配置文件介绍 数据库常用命令(库操作.表操作.记录操作) 今日内容详细 什么是数据库 1.单机游戏 本地保存 ...

  2. (第二章第四部分)TensorFlow框架之TFRecords数据的存储与读取

    系列博客链接: (第二章第一部分)TensorFlow框架之文件读取流程:https://www.cnblogs.com/kongweisi/p/11050302.html (第二章第二部分)Tens ...

  3. Python字典的创建与复制

    Python 字典练习题 1.字典的创建 1.1 普通创建 d={'name':'Allen','age':21,'gender':'male'} print(d) # {'name': 'Allen ...

  4. Java中ArrayList和LinkedList的异同

    一:ArrayList和LinkedList的大致区别如下: 1.ArrayList是实现了基于动态数组的数据结构,ArrayList实现了长度可变的数组,在内存中分配连续的空间.遍历元素和随机访问元 ...

  5. 基于Kubernetes/K8S构建Jenkins持续集成平台(下)

    基于Kubernetes/K8S构建Jenkins持续集成平台(下) Jenkins-Master-Slave架构图回顾: 安装和配置NFS NFS简介 NFS(Network File System ...

  6. 微服务入门三:SpringCloud Alibaba

    一.什么是SpringCloud Alibaba 1.简介 1)简介 阿里云未分布式应用开发提供了一站式解决方案.它包含了开发分布式应用程序所需的所有组件,使您可以轻松地使用springcloud开发 ...

  7. Sqlserver 2008 导出数据库

    sqlserver2008中导出数据库: ①当数据库中的数据量比较大时,可使用备份的方法. 路径可以默认,想自定义就点击[添加],最后[确定]即可. ②当数据量不是很大时,可以采用导出SQL执行语句的 ...

  8. 手把手教你使用 Java 在线生成 pdf 文档

    一.介绍 在实际的业务开发的时候,研发人员往往会碰到很多这样的一些场景,需要提供相关的电子凭证信息给用户,例如网银/支付宝/微信购物支付的电子发票.订单的库存打印单.各种电子签署合同等等,以方便用户查 ...

  9. Windows原理深入学习系列-Windows内核提权

    这是[信安成长计划]的第 22 篇文章 0x00 目录 0x01 介绍 0x02 替换 Token 0x03 编辑 ACL 0x04 修改 Privileges 0x05 参考文章 继续纠正网上文章中 ...

  10. 微信小程序实现简单的2048

    这两天心血来潮,用微信小程序写了一个简单的2048,欢迎各位老铁围观,提出宝贵意见.这里我从0到1赘述一下个人实现流程: 首先去微信公平台(https://mp.weixin.qq.com/)注册一个 ...