ES 6ノート(set)

6658 ワード

js。

1、セット:新しいデータ構造:
配列に似ていますが、メンバーの値は全部唯一で重複していません.
彼のキーは値と同じです.
(1)、setの基本的な使い方:初期化
//new Aray()[]
var s=new Set()
var s=new Set([1,2,3,4])
var s=new Set(….document.querySelectorAll('div'))
(2)、属性と方法:
size: setインスタンスのメンバー数を返します.
add(value):値を追加し、Set構造自体に戻ります.
delete(value):値を削除し、ブール値を返します.
has(value):ブール値を返し、パラメータがsetのメンバーかどうかを表します.
clear():全メンバーをクリアし、戻り値がありません.
(3)、Aray.from(set対象) セットを行列に変えることができます.
クラスの配列オブジェクトまたはオブジェクトを巡回して本物の配列に変換します.

//               
const arrayLike={
    '0':'  ',
    '1':23,
    '2':'boy',
    length:3
}
console.log(Array.from(arrayLike))//["  ", 23, "boy"]
console.log([].slice.call(arrayLike))//["  ", 23, "boy"]


//NodeList      
const foo = document.querySelectorAll('p'); //       
console.log( Array.from(foo))//[p, p]
console.log(Array.prototype.slice.call(foo))//[p, p]


//Array.from()     
aaaaaaaaaAAAAA
bbbbbbbbbbbb

let ps = document.querySelectorAll('p');
let a=Array.from(ps).filter(p => {
  return p.textContent.length > 10;
});
console.log(a); //Array[2]0: p1: plength: 2__proto__: Array[0]

//         
let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

(4)、配列の繰り返し:
第一種類:[...setオブジェクト]
第二種類:Aray.from(setオブジェクト)

//  Set  	
console.log(Set.prototype)

----------------------------------------

//Set      
let s=new Set();
console.log(typeof s); //object

----------------------------------------

//   ，       s[0]
let s=new Set([10,20,30,30]); 
console.log(s.size); //3          ，     3

----------------------------------------

//        
function divs(){
	return [...document.querySelectorAll("div")]
}
var set=new Set(divs());
for(let el of set){//for of
	el.style.backgroundColor='red';//   div    
}
console.log(set.size)

----------------------------------------

//   、   、    、  
var s=new Set();
s.add(10).add(20).add(30).add(30)
console.log(s);//{10, 20, 30}
s.delete(30);
console.log(s);//{10, 20}
console.log(s.has(20)); //rue          
s.clear(); //    s
console.log(s);//{}

----------------------------------------

//set        
//    
var arr=[10,20,30,40,30,10,20];
var s=new Set(arr);
console.log(s.size);//4
var res=Array.from(s); //    
console.log(res);//[10, 20, 30, 40]

----------------------------------------

//      (   Array.from          ..)
var arr=[10,20,30,40,30,10,20];
function unique(arr){
	//return Array.from(new Set(arr)) 
	return [...new Set(arr)];//   set             (       )，          
}
console.log(unique(arr));//[10, 20, 30, 40]

2、Setは関連するappeyes():キーの名前を返すvalues():リターン値entries():戻る値キーの値はforEach():フィードバックは各メンバーmapを遍歴し、 [...set].map(x=>x*2)filter [...set].filter(x=>(x%=2)=0)let a=new Set([1,2,3])let b=new Set([2,5,8])集合: newセット([...a,…b]);交差点: new Set(….a).filter(x=>b.has(x))差セット: new Set(….a).filter(x=>!b.has(x));set同期データlet set=new Setを巡回します.set=new Set(…set).map(val=>val*2);let set=new Set([10,20,30])
set=new Set(Aray.from(set,val=>val*2);

//   、 、   		
var set=new Set(["a","b","aaa"]);
for(let key of set.keys()){
	console.log(key);//a b aaa
}

var set=new Set(["a","b","aaa"]);
for(let key of set.values()){
	console.log(key);//a b aaa
}

var set=new Set(["a","b","aaa"]);
for(let key of set.entries()){ //   
	console.log(key);//["a", "a"] ["b", "b"] ["aaa", "aaa"]
}
set.forEach((val,key)=>{
	console.log(val,key); //a a      b b    aaa aaa
})

--------------------------------------------------------

//map  set   （       object）    map，            
//[...set] set         
var set=new Set([1,2,3]);
set=[...set].map((val)=>{  
	return val*2   //  ，
})
//conaole.log(Array,from(set))
console.log(set); //[2, 4, 6]

----------------------------------------------------

//  ：     true       
var set=new Set([1,2,3]);
set=[...set].filter((val)=>{  
	return val%2 == 0   //     
})
console.log(set); //[2]

----------------------------------------------------

//  、  、  
let a = new Set( [ 1, 2, 3 ] );
let b = new Set( [ 2, 5, 8 ] );

//  
//var set=new Set([...a,...b]); //             ，  set        
//console.log(set)//     {1, 2, 3, 5, 8}
//console.log([...set])//     [1, 2, 3, 5, 8]

//  
//set=new Set( [...a].filter( x => b.has( x ) ) ); // a        ，         ，a      ， b      ，   return  
//console.log(set);//{2}

//  
set=new Set( [...a].filter( x => !b.has( x ) ) );//a      ， b      
console.log{1, 3};

----------------------------------------------------

//    
//  set 
let set = new Set( [ 10, 20, 30 ] );
set = new Set( [...set].map( val => val * 2 ) );
console.log(set);// {20, 40, 60}

let set = new Set( [ 10, 20, 30 ] );
set = new Set( Array.from( set, val => val * 2 ) ); //Array.from()          
console.log(set);//{20, 40, 60}

抽選:








    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 = '      ';
            }
        }, false );
    });

面白いアルゴリズムの問題-2