关于js的Set和Map结构的学习和记录

对阮一峰老师的ES6入门和网上有关资料的的一点学习和记录

1、Set数据结构

  • Set构造函数的参数是一个可遍历( iterator)对象
  • Set中的成员值是唯一的,判断成员是否相等用'==='来判断,不同之处在于,在Set中NaN与NaN判断为相等
  • Set的属性有.constructor:Set .size:成员大小
  • Set中有方法 .add(val):添加,返回set .delete(val):boolean删除 .has(val):boolean判断存在 .clear():清除所有成员
  • Set中的遍历方法 .keys():键名 .values():键值 .entries():键值对 .forEach(function(){}):回调函数
  • set.forEach(function(value,index,array){})中 value == index ==>set没有索引,不能用set[1]

*在set结构中没有键名,只有键值,所以set.keys() == set.values(),且默认遍历的是调用values()方法

以下是浏览器后台中Set结构的截图

实例中的代码:

<script>
var set = new Set([1,2,3,2,3]);
set.add('5');
set.add('5');
console.log(set);//Set(4) {1, 2, 3, "5"}
set.add(NaN);
console.log(set);//Set(5) {1, 2, 3, "5", NaN}
console.log(set.constructor);//ƒ Set() { [native code] }
console.log(set.size);//5
console.log(set.length);//报错
for(let i of set.keys()){//set结构类似数组遍历
console.log(i);{
}
}
for(let i of set.values()){ // ==for(let i of set)
console.log(i);
}
for(let i of set.entries()){ //键值对遍历
console.log(i);
}
</script>

2、Map数据结构

传统对象为键值对的集合,且键必须为'字符串',map结构改为'值-值'的形式,且可以用任何数据类型

map中的键根据内存地址来判断是否为同一个

  • Map构造函数的参数是一个可遍历( iterator)对象
  • Map也是键值对的存储形式,不过map中的键和值可以是任意的数据结构
  • Map的属性 .constructor:Map .size:成员大小
  • Map的方法 .set(key,value):设置值,返回map .get(key):获取值,返回value .has(key):判断存在,返回boolean
  • .delete(key):删除值,返回boolean .clear():清除成员
  • Map中的遍历方法 .keys():键名 .values():键值 .entries():键值对 .forEach(function(){}):回调函数

以下是在后台中Map结构的截图

实例代码

<script>
var map = new Map();
map.set(1,'123');//map.set(key,value)形式赋值
map.set('2',true);
map.set(false,'boolean');
console.log(map);//Map(3) {1 => "123", "2" => true, false => "boolean"}
console.log(map.size);//3
console.log(map.constructor);//Map()
for(let i of map.keys()){//键遍历
console.log(i);
}
for(let i of map.values()){//值遍历
console.log(i);
}
for(let i of map.entries()){//键值对遍历
console.log(i);
}
</script>

关于Set和Map数据结构的一点学习的更多相关文章

  1. ES6学习笔记(九)Set和Map数据结构

    1.set 基本等于Java的Set集合类型,无序不可重复集,常被用来去重. 基本用法 const s = new Set();//通过Set()构造函数创建 [2, 3, 5, 4, 5, 2, 2 ...

  2. ES6学习总结之Set和Map数据结构的理解

    前言 当我们需要存储一些数据的时候,首先想到的是定义一个变量用来存储,之后我们可能学了数组,发现数组比变量可以存储更多的数据,接着可能有其它的存储数据的方法等等,然而我今天需要介绍的是在ES6中比较常 ...

  3. ES6中Map数据结构学习笔记

    很多东西就是要细细的品读然后做点读书笔记,心理才会踏实- Javascript对象本质上就是键值对的集合(Hash结构),但是键只能是字符串,这有一定的限制. 1234 var d = {}var e ...

  4. es6学习笔记-set和map数据结构

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

  5. js-ES6学习笔记-Set和Map数据结构

    1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. 2.Set 函数可以接受一个数组(或类似数组的对 ...

  6. JavaScript(ES6)学习笔记-Set和Map数据结构(一)

    一.Set 1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. , , , , ']); s; // ...

  7. ES6-Set和Map数据结构学习笔记

    Set和Map数据结构 Set 基本用法 ES6提供了新的数据结构--Set,类似于数组,但是成员的值是唯一的,没有重复的值,Set本身是一种构造函数,用来生成Set数据结构 var s = new ...

  8. ES6学习笔记(10)----Set和Map数据结构

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Set和Map数据结构 1.Set  基本用法    Set是一种新的数据结构,它的成员都是唯一 ...

  9. es6 学习7 Set 和 Map 数据结构

     Set 和 Map 数据结构 一.Set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. const set = new Set([1, 2, 3, 4, ...

随机推荐

  1. 理解LSTM网络--Understanding LSTM Networks(翻译一篇colah's blog)

    colah的一篇讲解LSTM比较好的文章,翻译过来一起学习,原文地址:http://colah.github.io/posts/2015-08-Understanding-LSTMs/ ,Posted ...

  2. [以太坊源代码分析] I.区块和交易,合约和虚拟机

    最近在看以太坊(Ethereum)的源代码, 初初看出点眉目. 区块链是近年热点之一,面向大众读者介绍概念的文章无数,有兴趣的朋友可自行搜索.我会从源代码实现入手,较系统的介绍一下以太坊的系统设计和协 ...

  3. bootstrap-table 页脚总计(自定义统计总数)

    •首先给table添加属性: showFooter: footer js代码如下: //初始化bootstrapTableinitBootstrapTable: function () { var o ...

  4. html5视频常用API接口

    一.虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=”属性值”)格式,避免出现错误 (下面加粗的属性为常用属性) 属性 值 功能描述 controls controls 是否显 ...

  5. 前端深入之css篇丨2020年前,彻底掌握css动画【animation】

    写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所 ...

  6. 代码审计-YXcms1.4.7

    题外: 今天是上班第一天,全都在做准备工作,明天开始正式实战做事. 看着周围稍年长的同事和老大做事,自己的感觉就是自己还是差的很多很多,自己只能算个废物. 学无止境,我这样的垃圾废物就该多练,保持战斗 ...

  7. pycharm2018.2汉化 解决设置打不开问题

    首先检查下是不是装了中文汉化包resources_cn.jar 如果有的话,解决办法:1.更换一个汉化包或者将原来的resources_en.jar也放进lib目录下 2.将汉化包都删除,只留下原版的 ...

  8. 2019年高级Java程序员面试题汇总

    目录 JDK Dubbo Zookeeper Strut2 Spring系列 Redis系列 Mysql系列 Java多线程 消息中间件 线程池 事物 JVM 设计模式 其他 程序设计 基础知识 编程 ...

  9. java与java web数组括号的不同

    由于之前学JAVA SE数组时习惯了数组括号的写法,到了Web这里写了有点不太习惯了,赶快写篇博客加深一下印象哈 一. java和java web中的数组的不同 java: int[] arr = n ...

  10. xss姿势利用

    1.定位页面可以出现xss的位置 可能会出现联合点利用 一个页面多个存储位置或者一个页面多个参数联合利用 例如输入xss 查看页面源码页面里有多个xss 或者多个参数显示 可以利用 需要注意的是有的是 ...