[js高手之路] es6系列教程 - Set详解与抽奖程序…

2018-06-24 00:21:18来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

1 var obj = Object.create( null );
2 obj[5] = 'ghostwu'; 
3 console.log( obj["5"] ); //ghostwu
4 console.log( obj[5] ); //ghostwu

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

1 var obj = Object.create( null );
2 var key1 = {};
3 var key2 = {};
4 obj[key1] = "ghostwu";
5 console.log( obj[key1] ); //ghostwu
6 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属性获取集合的元素个数

1 var set = new Set();
2 set.add( 5 );
3 set.add( '5' );
4 console.log( set.size ); //2

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

1 var set = new Set();
2 var key1 = {};
3 var key2 = {};
4 set.add( key1 );
5 set.add( key2 );
6 console.log( set.size ); //2

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

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

1 var set = new Set();
2 set.add( 5 );
3 set.add( '5' );
4 set.add( 5 ); //忽略
5 console.log( set.size ); //2

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

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

1 var set = new Set();
2 set.add( 5 );
3 set.add( '5' );
4 console.log( set.has( '5' ) ); //true
5 console.log( set.has( 5 ) ); //true
6 console.log( set.has( 'wu' ) ); //false

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

 1 var set = new Set();
 2 set.add( 5 );
 3 set.add( '5' );
 4 
 5 console.log( set.has( '5' ) ); //true
 6 set.delete( '5' );
 7 console.log( set.has( '5' ) ); //false
 8 
 9 console.log( set.has( 5 ) ); // true
10 console.log( set.size ); // 1
11 
12 set.clear();
13 console.log( set.has( 5 ) ); // false
14 console.log( set.size ); // 0

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

1 var set = new Set( [ 10, 20, 30, 10, 10, 20, 40 ] );
2 console.log( set.size ); //4

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

1 var set = new Set( [ 'ghostwu', '悟空', '八戒' ] );
2 set.forEach( function( val, key, cur ){
3     console.log( key, val, cur );
4 } );

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

1 var set = new Set( [ 10, 20, 30, 10, 10, 20, 40 ] );
2 var arr = [...set];
3 console.log( arr ); // 10, 20, 30, 40

封装成去重复的函数

1 function unique( arr ){
2     return [...new Set( arr )];
3 }
4 var arr = [ 'abc', 'ghostwu', 'abc', 'ghostwu' ];
5 console.log( unique( arr ) ); //abc, ghostwu

 

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         #box {
10             width: 300px;
11             height: 100px;
12             line-height: 100px;
13             font-size: 30px;
14             text-align: center;
15             border: 1px solid #aaa;
16             box-shadow: 2px 2px 3px #ccc;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="box"></div>
22     <input type="button" value="小明">
23     <input type="button" value="小B">
24     <input type="button" value="小A">
25     <input type="button" value="小新">
26     <input type="button" value="小叶">
27     <script>
28         var aPrize = ['小米', 'iphone5', 'iphone6', 'iphone7', 'iphone8'],
29             aInput = document.querySelectorAll("input"),
30             oBox = document.querySelector("#box"),
31             set = new Set(), rand = null;
32         aInput.forEach((ele, ind, cur) => {
33             ele.flag = false;
34             ele.addEventListener('click', () => {
35                 if ( !ele.flag ) {
36                     rand = Math.floor(Math.random() * aPrize.length);
37                     if (!set.has(rand)) {
38                         set.add(rand);
39                     } else {
40                         while (set.has(rand)) {
41                             rand = Math.floor(Math.random() * aPrize.length);
42                             if (!set.has(rand)) {
43                                 set.add(rand);
44                                 break;
45                             }
46                         }
47                     }
48                     oBox.innerHTML = aPrize[rand];
49                     ele.flag = true;
50                     ele.value = '您已经抽过了';
51                 }
52             }, ele);
53         });
54     </script>
55 </body>
56 </html>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:对象转数组并倒序

下一篇:react.js 给标识ref,获取内容