[js高手之路] es6系列教程 - Set详解与抽奖程序应用实战
我们还是从一些现有的需求和问题出发，为什么会有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详解与抽奖程序应用实战的更多相关文章
- [js高手之路] es6系列教程 - Map详解以及常用api
ECMAScript 6中的Map类型是一种存储着许多键值对的有序列表.键值对支持所有的数据类型. 键 0 和 ‘0’会被当做两个不同的键,不会发生强制类型转换. 如何使用Map? let map = ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...
- [js高手之路] es6系列教程 - 函数的默认参数详解
在ES6之前,我们一般用短路表达式处理默认参数 function show( a, b ){ var a = a || 10; var b = b || 20; console.log( a, b ) ...
- [js高手之路] es6系列教程 - 箭头函数详解
箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...
- [js高手之路] es6系列教程 - var, let, const详解
function show( flag ){ console.log( a ); if( flag ){ var a = 'ghostwu'; return a; } else { console.l ...
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
随机推荐
- 如何将Windows7系统中“运行”历史记录全部清除
如何将Windows7系统中“运行”历史记录全部清除.. 如何将Windows7系统中“运行”历史记录全部清除 1.任务栏空白处按下鼠标右键,在右键菜单栏中选择“属性”, 2.切换到“开始菜单”选项卡 ...
- 电脑重装系统按什么键进U盘PE
电脑重装系统按什么键进U盘PE... -------------------------- 各品牌电脑重装系统快捷按键进U盘PE: -------------------------- Dell电脑重 ...
- (转载)理解Java中的引用传递和值传递
关于Java传参时是引用传递还是值传递,一直是一个讨论比较多的话题,有论坛说Java中只有值传递,也有些地方说引用传递和值传递都存在,比较容易让人迷惑.关于值传递和引用传递其实需要分情况看待,今天 ...
- selenium 对https网站（加密证书）进行自动化测试
由于公司需要,被测网站有证书加密,由于在selenium启动firefox的时候,它会重新建一个profile作为启动的profile,所以无论你怎么把站点设为可信任站点,在selenium启动的fi ...
- element ui datePicker 设置当前日期之前的日期不可选
pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7 } },
- Java IO包装流如何关闭
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt381 问题: (1)JAVA的IO流使用了装饰模式,关闭最外面的流的时候会自 ...
- mybaties-plus入门
目前正在维护的公司的一个项目是一个ssm架构的java项目,dao层的接口有大量数据库查询的方法,一个条件变化就要对应一个方法,再加上一些通用的curd方法,对应一张表的dao层方法有时候多达近20个 ...
- GUI记事本+切换面板1.1版
package com.niit.javagui; import java.awt.Color; import java.awt.MenuBar; import java.awt.event.Inpu ...
- 团队作业4——第一次项目冲刺（Alpha版本）2017.4.22
昨天来不及编写,这是4月22日的日志,现在补上. 1.开完站立式会议后的合照 2.任务分解图 3.开会讨论的结果,任务分派 队员 今日进展 明日安排 陈鑫龙 原型设计图分析,设计登陆界面原稿 实现登陆 ...
- 201521123059 《Java程序设计》第八周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 简单泛型定义: public class Pair<T> ...