我们还是从一些现有的需求和问题出发，为什么会有set,他的存在是为了解决什么问题？

我们看一个这样的例子，为一个对象添加键值对

 var obj = Object.create( null );

 obj[5] = 'ghostwu';

 console.log( obj["5"] ); //ghostwu

 console.log( obj[5] ); //ghostwu

以null为原型对象，创建一个对象，给对象添加一个数字键5, 在输出的时候，数字键5会自动转换成字符键"5"，这样的自动类型转换，会产生很多隐式问题.

 var obj = Object.create( null );

 var key1 = {};

 var key2 = {};

 obj[key1] = "ghostwu";

 console.log( obj[key1] ); //ghostwu

 console.log( obj[key2] ); //ghostwu

上面这个程序中，空对象在作为键的情况下， 发生类型转换，变成对象对应的字符串 '[object Object]'，所以obj[key1]和obj[key2]指向的是同一个引用

obj = {

    num : 0

}

if ( obj.num ) {

    alert( '存在这个变量' );

}

判断一个对象是否存在某个属性，如果num是非false的值，上面就没有问题，现在num为0，对象是存在num这个值的，但是用if判断的时候，结果就不对了

es6的set集合，就不会产生键的变量类型转换.

set的基本使用方法：

set是一种有序列表，其中含有一些相互独立的非重复的值.

调用new Set()创建Set集合，如果需要为set集合添加值，用add方法, size属性获取集合的元素个数

 var set = new Set();

 set.add( 5 );

 set.add( '5' );

 console.log( set.size ); //

5和'5'是两个不同的值

 var set = new Set();

 var key1 = {};

 var key2 = {};

 set.add( key1 );

 set.add( key2 );

 console.log( set.size ); //2

key1和key2是两个独立的值，尽管他们都是空对象

添加一个同名的值操作，会被忽略

 var set = new Set();

 set.add( 5 );

 set.add( '5' );

 set.add( 5 ); //忽略

 console.log( set.size ); //

因为set集合的值是非重复的

has(): 检测set集合是否存在某个值:

 var set = new Set();

 set.add( 5 );

 set.add( '5' );

 console.log( set.has( '5' ) ); //true

 console.log( set.has( 5 ) ); //true

 console.log( set.has( 'wu' ) ); //false

delete: 删除某个值， clear:清空set

 var set = new Set();

 set.add( 5 );

 set.add( '5' );

 console.log( set.has( '5' ) ); //true

 set.delete( '5' );

 console.log( set.has( '5' ) ); //false

 console.log( set.has( 5 ) ); // true

 console.log( set.size ); //

 set.clear();

 console.log( set.has( 5 ) ); // false

 console.log( set.size ); //

利用set的特性，可以把数组去重复

 var set = new Set( [ 10, 20, 30, 10, 10, 20, 40 ] );

 console.log( set.size ); //

Set跟数组一样，也支持forEach方法，参数也是一样

 var set = new Set( [ 'ghostwu', '悟空', '八戒' ] );

 set.forEach( function( val, key, cur ){

     console.log( key, val, cur );

 } );

键与值一样，数组的键是数字索引，这点不同。所以Set不能像用数组索引那样去取值，但是我们可以把Set转换成数组，而且能利用set的非重复特性，把数组去重复

 var set = new Set( [ 10, 20, 30, 10, 10, 20, 40 ] );

 var arr = [...set];

 console.log( arr ); // 10, 20, 30, 40

封装成去重复的函数

 function unique( arr ){

     return [...new Set( arr )];

 }

 var arr = [ 'abc', 'ghostwu', 'abc', 'ghostwu' ];

 console.log( unique( arr ) ); //abc, ghostwu

应用set的特性，做一个多人抽奖的小程序，确保每一个人抽到的奖项都是唯一的

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         #box {

             width: 300px;

             height: 100px;

             line-height: 100px;

             font-size: 30px;

             text-align: center;

             border: 1px solid #aaa;

             box-shadow: 2px 2px 3px #ccc;

         }

     </style>

 </head>

 <body>

     <div id="box"></div>

     <input type="button" value="小明">

     <input type="button" value="小B">

     <input type="button" value="小A">

     <input type="button" value="小新">

     <input type="button" value="小叶">

     <script>

         var aPrize = ['小米', 'iphone5', 'iphone6', 'iphone7', 'iphone8'],

             aInput = document.querySelectorAll("input"),

             oBox = document.querySelector("#box"),

             set = new Set(), rand = null;

         aInput.forEach((ele, ind, cur) => {

             ele.flag = false;

             ele.addEventListener('click', () => {

                 if ( !ele.flag ) {

                     rand = Math.floor(Math.random() * aPrize.length);

                     if (!set.has(rand)) {

                         set.add(rand);

                     } else {

                         while (set.has(rand)) {

                             rand = Math.floor(Math.random() * aPrize.length);

                             if (!set.has(rand)) {

                                 set.add(rand);

                                 break;

                             }

                         }

                     }

                     oBox.innerHTML = aPrize[rand];

                     ele.flag = true;

                     ele.value = '您已经抽过了';

                 }

             }, ele);

         });

     </script>

 </body>

 </html>

[js高手之路] es6系列教程 - Set详解与抽奖程序应用实战的更多相关文章

  1. [js高手之路] es6系列教程 - Map详解以及常用api

    ECMAScript 6中的Map类型是一种存储着许多键值对的有序列表.键值对支持所有的数据类型. 键 0 和 ‘0’会被当做两个不同的键,不会发生强制类型转换. 如何使用Map? let map = ...

  2. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  3. [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

    接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...

  4. [js高手之路] es6系列教程 - 迭代器与生成器详解

    什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...

  5. [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

    关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...

  6. [js高手之路] es6系列教程 - 函数的默认参数详解

    在ES6之前,我们一般用短路表达式处理默认参数 function show( a, b ){ var a = a || 10; var b = b || 20; console.log( a, b ) ...

  7. [js高手之路] es6系列教程 - 箭头函数详解

    箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...

  8. [js高手之路] es6系列教程 - var, let, const详解

    function show( flag ){ console.log( a ); if( flag ){ var a = 'ghostwu'; return a; } else { console.l ...

  9. [js高手之路] es6系列教程 - 不定参数与展开运算符(...)

    三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...

随机推荐

  1. C语言指针（二）指向指针的指针

    注意:指向指针的指针适合于做链表 1.声明方式:在变量名前放置两个*符号 int**var; 2.实例: #include<stdio.h>int main (){intvar;int*p ...

  2. .NET 体系结构（.net core、.net framework、xamarin之间的关系）

    这是一张来自官方的图. 图中.NET FRAMEWORK..NET CORE和XAMARIN是三个不同的运行时,这三个运行时在.NET STANDARD LIBRARY之上,它们都包含一些基础的组件, ...

  3. php设计模式--注册器模式

    之前介绍过工厂模式和策略模式有两种方式去调用方法,一种是用工厂方法调用,一种是单例调取实例,那实际上这两种都有一个缺点(可能也不应该称为缺点,也可叫不足),有一个比较好的方法就是已经创建好的这个对象, ...

  4. ID3算法（1）

    1 简述1.1    id3是一种基于决策树的分类算法,由J.Ross Quinlan在1986年开发.id3根据信息增益,运用自顶向下的贪心策略建立决策树.信息增益用于度量某个属性对样本集合分类的好 ...

  5. shell之算数运算符、逻辑运算符、关系运算符、布尔运算符、文件测试运算符

    注意事项: (1)bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 expr,expr 最常用: (2)完整的表达式要被 ` ` 包含,注意这个字符不是常用的单引号,在 Es ...

  6. jquery的2.0.3版本源码系列(3):96行-283行，给JQ对象，添加一些方法和属性

    jquery是面向对象的程序,面向对象就离不开方法和属性. 方法的简化 jQuery.fn=jQuery.prototype={ jquery: 版本 constructor: 修正指向问题 init ...

  7. python网络编程（线程）

    一.socketserver模块 之前的例子中的C/S架构只能实现同一时刻只有一台客户端可以和服务端进行数据交互,我们可以通过socketserver模块实现并发. 基于tcp的套接字,关键就是两个循 ...

  8. 一步步带你做vue后台管理框架(一)——介绍框架

    系列教程<一步步带你做vue后台管理框架>第一课 github地址:vue-framework-wz 线上体验地址:立即体验 在如今的科技公司中有很多前端的需求都是要写一个类似于后台管理框 ...

  9. Visual Studio2017 远程调试 Remote Debugger

    前言 大家在使用vs打包后的文件部署到服务器后,有时候我们需要对线网的后台进行调试.但是它不像在VS中.这个时候我们该怎么调试呢? 微软想到了这一点,他们在 VS 中给我们提供了一个功能: Remot ...

  10. 使用反射+策略模式代替项目中大量的switch case判断

    我这里的业务场景是根据消息类型将离线消息存入mongoDB不同的collection中.其中就涉及到大量的分支判断,为了增强代码的可读性和可维护性,对之前的代码进行了重构. 先对比一下使用反射+策略模 ...