iT邦幫忙

2021 iThome 鐵人賽

DAY 17
1
Modern Web

初學者跪著學JavaScript系列 第 17

初學者跪著學JavaScript Day17: 物件:new Set()

  • 分享至 

  • xImage
  •  

一日客語:中文:不好意思 客語:paiˇse! ㄆㄞˇ 厶ㄟ
1.set 是一個集合
2.集合沒有索引
3.集合內無法重複元素,only you
4.引數可以是迭代物件(iterable Object)
5.set是迭代物件

引數可以是迭代物件(iterable Object)

回傳值是一個新的 Set 物件。

let empty = new Set(); //空集合
let mySet = new Set([1, 2]); //集合內有兩個成員
let mySet2 = new Set([100, 200, mySet]);//集合內有三個成員
let mySet3 = new Set('wendy'); 
console.log(empty); //Set(0) {}
console.log(mySet); //Set(2) { 1, 2 }
console.log(mySet2); //Set(3) { 100, 200, Set(2) { 1, 2 } }
console.log(mySet3); //Set(5) { 'w', 'e', 'n', 'd', 'y' }

集合內有多少個值? 可以使用set的size 屬性,來看看

let empty = new Set(); //空集合
let mySet = new Set([1, 2]); //集合內有兩個成員
let mySet2 = new Set([100, 200, mySet]);
let mySet3 = new Set('wendy');
console.log(empty.size);//0
console.log(mySet.size);//2
console.log(mySet2.size);//3
console.log(mySet3.size);//5

集合內無法重複元素

let food = new Set('apple');
//Set(4) { 'a', 'p', 'l', 'e' }
console.log(food);
let score1 = new Set([100, 50, 100]);
console.log(score1);//Set(2) { 100, 50 }
let score1 = new Set([100, 50, 100]);
const fruit1 = new Set('apple');
const fruit2 = new Set('lemon');
let total = new Set([score1, score1, fruit1, fruit2]);
console.log(total);

//結果
Set(3) {
  Set(2) { 100, 50 },
  Set(4) { 'a', 'p', 'l', 'e' },
  Set(5) { 'l', 'e', 'm', 'o', 'n' }
}

使用set空物件新增元素/刪除元素:add()delete()

在Array 可以使用push()pop()來更動陣列內元素
在Set 可以使用add(哪一個元素)delete(哪一個元素)

新增元素:add()

let empty = new Set();
console.log(empty.size);//0
empty.add(1);
console.log(empty.size);//1
empty.add(undefined);
console.log(empty.size);//2
empty.add([10, 100]);
console.log(empty.size);//3
let empty = new Set();
empty.add(1);
empty.add(undefined);
empty.add([10, 100]);
console.log('size:', empty.size, 'set:', empty); //size: 3 set: Set(3) { 1, undefined, [ 10, 100 ] }
empty.add('wendy').add(true).add(100000);
console.log('size:', empty.size, 'set:', empty); //size: 6 set: Set(6) { 1, undefined, [ 10, 100 ], 'wendy', true, 100000 }

刪除元素:delete()

  • 只會刪除一個元素
  • 有回傳值是True
let mySet = new Set([10, 20, 30, 40, 50]);
console.log('size', mySet.size, 'mySet', mySet);
//size 5 mySet Set(5) { 10, 20, 30, 40, 50 }

mySet.delete(10); 
console.log('size', mySet.size, 'mySet', mySet);
//size 4 mySet Set(4) { 20, 30, 40, 50 }

mySet.delete(20);
console.log('size', mySet.size, 'mySet', mySet);
//size 3 mySet Set(3) { 30, 40, 50 }
let mySet = new Set([10, 20, 30, 40, 50, 1000, 2000]);
console.log(mySet.delete(10));//true
console.log(mySet.delete(100));//false

//只會刪除一個元素
mySet.delete(1000, 2000);
console.log('mySet', mySet);//mySet Set(5) { 20, 30, 40, 50, 2000 }

清除集合所有元素:clear()

let mySet = new Set([10, 20, 30, 40, 50]);
mySet.clear();
console.log(mySet.size);//0

集合內是否有元素:has()

let mySet = new Set([1, 2, 3, 100, 200, 300, 'wendy', {}]);
console.log(mySet.has(1)); //true
console.log(mySet.has('wendy')); //true

console.log(mySet.has(10)); //false
console.log(mySet.has({})); //false

把set物件轉成陣列

之前寫創建Array 四種方式其中一種就可以運用在這裡

Day14 :創建Array 四種方式

let mySet = new Set([1, 2, 3]);
let addArray = [4, 5];
mySet.add(addArray);
console.log('set:', mySet);
//set: Set(4) { 1, 2, 3, [ 4, 5 ] }
console.log('array:', [...mySet]);
//array: [ 1, 2, 3, [ 4, 5 ] ]

set 使用forEach()

先複習一下Array的forEach()

let myArray = [1, 2, 3, 100, 200, 300, 'wendy', {}];
myArray.forEach((element, index) => {
    console.log(index, element);
//0 1
//1 2
//2 3
//3 100
//4 200
//5 300
//6 wendy
//7 {}
});
let mySet = new Set([1, 2, 3, 100, 200, 300, 'wendy', {}]);
mySet.forEach((element, index) => {
    console.log(index, element);
//1 1
//2 2
//3 3
//100 100
//200 200
//300 300
//wendy wendy
//{} {}    
});

因為set沒有索引所以會把元素也當作第二參數帶入,因此第一參數和第二參數才會一樣。

刪除陣列內重覆元素可以使用Set

const myArray = [1, 2, 3, 3, 3, 3, 3, 3, 5, 5, 5, 7, 7, 0, 0, 0];
console.log([...new Set(myArray)]);
//[ 1, 2, 3, 5, 7, 0 ]

試試數學的集合論
聯集:

let set1 = [1, 2, 3, 3, 3, 3, 3, 3, 5, 5, 5, 7, 7, 0, 0, 0];
let set2 = [2, 3, 4, 4, 5, 5, 5];
const totalSet = set1.concat(set2);
const answer = new Set(totalSet);
console.log(answer);//Set(7) { 1, 2, 3, 5, 7, 0, 4 }

oh~可以耶

資料來源:
mdn
JavaScript大全


上一篇
初學者跪著學JavaScript Day16 : 陣列Array 迭代的小小秘密
下一篇
初學者跪著學JavaScript Day18 : 物件:new Map()
系列文
初學者跪著學JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言