2019独角兽企业重金招聘Python工程师标准>>>

资料源：http://es6.ruanyifeng.com/#docs/set-map

继续爬坡......

只看了Set结构，慢慢消化。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Test</title><!--加载Traceur的库文件--><script type="text/javascript" src="../js/traceur.js"></script><!--将库文件用于浏览器--><script type="text/javascript" src="../js/browerSystem.js"></script><script type="text/javascript" src="../js/bootstrap.js"></script><!--type="module":Traceur 编译器识别 ES6 代码的标志，编译器会自动将所有type=module的代码编译为 ES5，然后再交给浏览器执行--><script type="module">// 1.类似于数组，但是成员的值都是唯一的，没有重复的值// Set 本身是一个构造函数，用来生成 Set 数据结构// Set 结构不会添加重复的值const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for(let i of s){console.log(i)}// 2.Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化// Set函数接受数组作为参数const set = new Set([1, 2, 3, 4, 4]);console.log([...set])const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);console.log(items.size)// Set函数接受类似数组的对象作为参数function divs() {return [...document.querySelectorAll('div')];}const  set = new Set(divs());// console.log(set.size);divs().forEach(div => set.add(div));console.log(set.size)// 3.Set函数去除数组重复成员console.log([...new Set([1, 1, 2, 3, 4, 5, 5])]);// 4.向 Set 加入值的时候，不会发生类型转换// Set 内部判断两个值是否不同，// 使用的算法叫做“Same-value equality”，// 它类似于精确相等运算符（===），// 主要的区别是NaN等于自身，// 而精确相等运算符认为NaN不等于自身// 在 Set 内部，两个NaN是相等let set = new Set();let a = NaN;let b = NaN;set.add(a);set.add(b);console.log(set)// 两个对象总是不相等的// 由于两个空对象不相等，所以它们被视为两个值let set = new Set();set.add({});console.log(set.size);set.add({});console.log(set.size);console.log(set)// 5.Set 实例的属性和方法// (1)属性// 构造函数，默认就是Set函数// Set.prototype.constructor// 返回Set实例的成员总数// Set.prototype.size// (2)方法// 操作方法// 添加某个值，返回 Set 结构本身//add(value)// 删除某个值，返回一个布尔值，表示删除是否成功//delete(value)// 返回一个布尔值，表示该值是否为Set的成员//has(value)// 清除所有成员，没有返回值//clear()let s = new Set();s.add(1).add(2).add(2)console.log(s.add(1).add(2).add(2));console.log(s.size);console.log(s.has(1));console.log(s.has(2));console.log(s.has(3));s.delete(1)console.log(s.has(1));const properties = {'width': 1,'height': 2};if(properties['width']){console.log(1111)}const properties = new Set();properties.add('width');properties.add('height');console.log(properties);if(properties.has('width')){console.log(2222)}// 6.Array.from方法可以将 Set 结构转为数组。const items = new Set([1, 2, 3, 4, 5]);console.log(items);const array = Array.from(items);console.log(array);// 7.提供去除数组重复成员的另一种方法function dedupe(array) {return Array.from(new Set(array));}console.log(dedupe([1, 1, 2, 3]));// 8.遍历方法:用于遍历成员// 返回键名的遍历器// keys()// 返回键值的遍历器// values()// 返回键值对的遍历器// entries()// 使用回调函数遍历每个成员// forEach()// (1)keys方法、values方法、entries方法返回的都是遍历器对象（详见《Iterator 对象》一章）// 由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。let set = new Set(['red', 'green', 'blue']);for(let item of set.keys()){console.log(item);}for(let item of set.values()){console.log(item);}// (2)entries方法返回的遍历器，同时包括键名和键值，所以每次输出一个数组，它的两个成员完全相等for(let item of set.entries()){console.log(item)}// (3)Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法// 这意味着，可以省略values方法，直接用for...of循环遍历 Setconsole.log(Set.prototype[Symbol.iterator] === Set.prototype.values);let set = new Set(['red', 'green', 'blue']);for(let x of set){console.log(x);}// (4)forEach(),用于对每个成员执行某种操作，没有返回值。let set = new Set([1, 4, 9]);set.forEach((value, key) => console.log(key + ':' + value));// 9.扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。let arr = [3, 5, 2, 2, 5, 5];let unique = [...new Set(arr)];console.log(unique);// 10.数组的map和filter方法也可以间接用于 Setlet set = new Set([1, 2, 3]);console.log([...set].map(x => x *2))set = new Set([...set].map(x => x *2));console.log(set)let set = new Set([1, 2, 3, 4, 5]);console.log([...set].filter(x => (x % 2) == 0))set = new Set([...set].filter(x => (x % 2) == 0));console.log(set)// 11.使用 Set 可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）let a = new Set([1, 2, 3]);let b = new Set([4, 3, 2]);let union = new Set([...a, ...b]);console.log(union);let intersect = new Set([...a].filter(x => b.has(x)));console.log(intersect);let difference = new Set([...a].filter(x => !b.has(x)));console.log(difference);// 12直接在遍历操作中改变原来的 Set 结构// 方法一：利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构let set = new Set([1, 2, 3]);set = new Set([...set].map(val => val * 2));console.log(set);// 方法二：利用Array.from方法let set = new Set([1, 2, 3]);set = new Set(Array.from(set, val => val *2));console.log(set);</script></head>
<body><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></body>
</html>

转载于:https://my.oschina.net/yj1993/blog/1593164

ES6------Set结构相关推荐

  1. ❤️《大前端—了解与使用ES6》

    <大前端-ES6>(建议收藏) 1.ES6的概述 ECMAScript的快速发展: 编程语言JavaScript是ECMAScript的实现和扩展 .ECMAScript是由ECMA(一个 ...

  2. JavaScript - ES6教程系列-李游Leo-专题视频课程

    JavaScript - ES6教程系列-321人已学习 课程介绍         ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言. 这种语言在万维网上应用广泛, ...

  3. 数据结构（队列实现篇）

    在数据结构与算法中,队列queue是一种受限的线性储存结构,特殊之处在于它只允许在表的前端front进行删除操作,而在表的后端rear进行插入操作,和栈一样,队列是一种操作受限制的线性表.进行插入操作 ...

  4. Vuex 2.0 源码分析

    作者:滴滴公共前端团队 - 黄轶 大家好,我叫黄轶,来自滴滴公共前端团队,我们团队最近写了一本书 --<Vue.js 权威指南>,内容丰富,由浅入深.不过有一些同学反馈说缺少 Vuex 的 ...

  5. treewidget怎么设置某一个item拖动的_如何零基础撸一个专车小程序？看这一文就够了！...

    作者 | hello等风来 责编 | 伍杏玲 最近时常感叹道:时间总是那么的快,转瞬即逝.对于像我这种刚入门的小生来讲,技术每天都在更新,框架也层出不穷,有时候还没弄懂这个知识大牛们又推出了更好的技术 ...

  6. vue对象深拷贝_JS 对象的深拷贝和浅拷贝

    现象 我们先来看一个demo // 我们先申明一个变量str1, // 然后把变量str1负值(拷贝)给变量str2 // 最后对变量str2进行修改操作 var str1 = 'shen' var ...

  7. [OHIF-Viewers]医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Reduxreact-redux状态管理详解...

    [OHIF-Viewers]医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解 先上官方文档,推荐阅读英文原版文档,是最新.最 ...

  8. 滴滴一下，小程序专车来了

     最近时常感叹道:时间总是那么的快,转瞬即逝.对于像我这种刚入门的小生来讲,技术每天都在更新,框架也层出不穷,有时候还没弄懂这个知识大牛们又推出了更好的技术.当然学习好的技术也是十分重要的.但是在 ...

  9. Element ui 中的tree 在数据前面添加自定义图标

    可以使用 el-tree 标签实现 在节点区添加按钮或图标等内容 也可以通过class来自定义图标 <template><div class="my-tree-main&q ...

  10. vue.js 的学习之路

    转自:http://www.cnblogs.com/CyLee/p/5813721.html 技术栈 # vue官网 http://vuejs.org/# Vuex中文手册 http://vuex.v ...

最新文章

  1. 用stm32f10x建立新的工程重要步骤
  2. JNI命令行下编译错误解决方案
  3. 视频聊天创企Tribe获300万美元种子轮融资
  4. 拼接图像亮度均匀调整_液晶拼接屏如何才能达到更好的显示效果
  5. python入门常用代码
  6. crm系统是什么很棒ec实力_搭建CRM系统要明确几个步骤？什么样的CRM是真正有用的系统？...
  7. java 集合 延迟加载_java-如何测试延迟加载的JPA集合是否已初始化？
  8. cookies默认过期时间_「图」Chrome Canary新版已启动“增强版cookies控制”预览测试...
  9. 放学默示录Ⅰ：来！抠奖 移动游戏策划案
  10. MySQL事务隔离级别及场景测试
  11. 分布式实时分析数据库citus数据插入性能优化
  12. python怎么引入thrift文件_python使用thrift教程的方法示例
  13. Android OpenGL加入光照和材料属性
  14. 如何做好项目进度管理
  15. iOS 性能优化那些繁杂琐碎的事儿
  16. 嵌入式、单片机之间的区别
  17. Android方向的实习生和应届生找工作面试的建议
  18. ubuntu 中比较好用的一些工具
  19. LeetCode 1071（最大公约）
  20. 腾讯多媒体实验室：基于三维卷积神经网络的全参考视频质量评估算法

热门文章

  1. k2p一直亮红灯搜不到信号_周迅感情亮红灯？真离了！？亮红灯英文是red light ？red 对了，但不用 light！...
  2. c语言根据变量作用域不同分为,C语言中不同变量的访问方式
  3. pythonif语句如何循环播放_python – 循环播放文本,一次3个字符
  4. 友益文书类似软件_网易有道词典笔，让你的英文书也有实时翻译功能
  5. success.ftlh与error.ftlh
  6. 英语学习笔记2019-9-29
  7. 2012-01-17-04
  8. 带注释源码php,php的注释方法
  9. 深圳大学计算机考研复习资料百度云,深圳大学(专业学位)计算机技术研究生考试科目和考研参考书目...
  10. abb机器人开通选项_ABB机器人623-1Multitasking选项 ABB机器人多任务使用方法教程...