初学者跪着学JavaScript Day17: 物件：new Set()

一日客语：中文：不好意思客语：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～可以耶