Set ในภาษา JavaScript

Set เป็นออบเจ็คที่ใช้สำหรับเก็บข้อมูลที่ไม่ซ้ำกัน มันสามารถใช้เก็บได้ทั้งข้อมูลประเภทพื้นฐานและออบเจ็ค (Object reference) ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับการใช้งาน Set ในภาษา JavaScript และตัวอย่างการประยุกต์ใช้ Set ในการเขียนโปรแกรม นี่เป็นเนื้อหาในบทนี้

• การประกาศและใช้งาน Set
• การตรวจสอบและลบค่าใน Set
• การวนรอบ Set
• การดำเนินการเกี่ยวกับ Set
• Set และอาเรย์

การประกาศและใช้งาน Set

Set เป็นออบเจ็คที่ใช้สำหรับเก็บข้อมูลที่ไม่ซ้ำกัน การใช้งาน Set จะทำให้เราแน่ใจได้ว่าข้อมูลจะถูกเก็บใน Set เพียงครั้งเดียวเท่านั้น นี่เป็นตัวอย่างการใช้งาน Set สำหรับเก็บตัวเลขจำนวนเต็มโดยที่ตัวเลขที่ซ้ำกันในจะไม่อนุญาติโดย Set

let mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(3);

// Add same values
mySet.add(2);
mySet.add(3);
mySet.add(3);

console.log("Size:", mySet.size);
console.log(mySet);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Size: 3
Set(3) { 1, 2, 3 }

ในตัวอย่างนี้ เราได้ใช้ Set สำหรับเก็บตัวเลขจำนวนเต็ม จากนั้นแสดงค่าและจำนวนของข้อมูลภายใน Set ออกทางหน้าจอ

let mySet = new Set();

ในตอนแรกเราได้สร้างออบเจ็คของ Set สำหรับเก็บข้อมูล เราได้สร้างออบเจ็คจากคลาส Set และเก็บไว้ในตัวแปร mySet เมื่อออบเจ็คถูกสร้างเราสามารถใช้มันในการเก็บข้อมูลโดยการเรียกใช้เมธอดบนออบเจ็คได้

mySet.add(1);
mySet.add(2);
mySet.add(3);

เราสามารถใช้เมธอด add เพื่อเพิ่มข้อมูลเข้าไปยัง Set ในตัวอย่างเราได้เพิ่มสามตัวเลขเข้าไปยัง Set ได้แก่ 1, 2 และ 3 จากนั้นเราได้เพิ่มค่าเดิมเข้าไปใน Set อีกครั้งนั่นคือ 2, 3 และ 3

// Add same values
mySet.add(2);
mySet.add(3);
mySet.add(3);

ในการเพิ่มข้อมูลด้วยเมธอด add จะทำการตรวจสอบก่อนว่ามีค่าดังกล่าวใน Set แล้วหรือไม่ ถ้าหากมีแล้วข้อมูลจะไม่ถูกเพิ่ม เนื่องจากทั้ง 2 และ 3 ถูกเพิ่มไปแล้วก่อนหน้า ดังนั้นนี่จะไม่เพิ่มเข้าไปอีกครั้ง ซึ่งนี่เป็นวิธีการทำงานของ Set เพื่อให้แน่ใจว่าข้อมูลจะปรากฏอยู่ในเซ็ตเพียงครั้งเดียว

console.log("Size:", mySet.size);
console.log(mySet);

เราสามารถนับจำนวนข้อมูลที่ถูกเก็บภายใน Set ได้ด้วยการอ่านค่าจาก Property size และแสดงค่าของ Set ออกทางหน้าจอด้วยเมธอด console.log

อีกรูปแบบหนึ่งในการประกาศ Set คือเราสามารถสร้างมันจากอาเรย์ได้ ซึ่งสามารถทำได้โดยการส่งอาเรย์ผ่านทางคอนสตรัคเตอร์ในตอนสร้างออบเจ็ค Set นี่เป็นตัวอย่าง

let languages = [1, 2, 3, 3, 3, 4, 5, 5, 6];
let mySet = new Set(languages);
console.log(mySet);

let langSet = new Set([
    "JS", "TS", "Python",
    "Ruby", "JS", "Ruby"
]);
console.log(langSet);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Set(6) { 1, 2, 3, 4, 5, 6 }
Set(4) { 'JS', 'TS', 'Python', 'Ruby' }

ในการสร้าง Set จากอาเรย์ค่าในอาเรย์จะถูกเพิ่มเข้าไปใน Set และในกรณีที่อาเรย์มีค่าที่ซ้ำกัน ค่าดังกล่าวจะถูกเก็บในเซ็ตเพียงครั้งเดียวเท่านั้น นี่เป็นวิธีในการแปลงอาเรย์ให้เป็น Set ในภาษา JavaScript

นอกจากนี้เรายังสามารถเก็บประเภทข้อมูลที่ต่างกันภายใน Set เดียวกันได้ ในกรณีนี้ ข้อมูลที่เป็นประเภทเดียวกันและมีค่าเหมือนกันเท่านั้นจะถูกพิจารณว่าเป็นค่าเดียวกัน ยกตัวอย่างเช่น

let mixedType = new Set();

mixedType.add(1);
mixedType.add(1.0);
mixedType.add("1");

mixedType.add(0);
mixedType.add("");

console.log(mixedType);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Set(4) { 1, '1', 0, '' }

ทุกค่าที่เก็บนั้นเซ็ตมองว่าเป็นค่าที่แตกต่างกันยกเว้น 1 และ 1.0 ที่เป็นตัวเลขซึ่งเป็นค่าเดียวกันในภาษา JavaScript ในขณะที่ 1 และ "1" นั้นมีค่า Literal ที่เหมือนกันแต่แตกต่างกันที่ประเภทข้อมูลดังนั้นเมื่อ Set เปรียบเทียบความเท่ากันของข้อมูลจะถือว่าเป็นคนละค่ากัน

ความเท่ากันของข้อมูล: สำหรับการเปรียบเทียบว่าออบเจ็คเท่ากันหรือไม่ Set ใช้ตัวดำเนินการเท่ากับ === ในการเปรียบเทียบก่อนที่จะเพิ่มข้อมูลเข้าไปยัง Set

การตรวจสอบและลบค่าใน Set

นอกจากการเพิ่มข้อมูลเข้าไปยัง Set ด้วยเมธอด add แล้ว ยังมีการดำเนินการพื้นฐานอย่างอื่นเกี่ยวกับ Set ที่เรามักจะทำเช่น การตรวจสอบค่าใน Set และการลบค่าออกไปจาก Set เราสามารถทำเช่นนั้นได้ดังในตัวอย่างต่อไปนี้

let numbers = new Set();

numbers.add(10);
numbers.add(20);
numbers.add(30);

// Check if values in set
console.log("Is 30 in set?", numbers.has(30));
console.log("Is 50 in set?", numbers.has(50));

// Delete one value from set
numbers.delete(30);
console.log("Deleted 30 from set");
console.log("Is 30 in set?", numbers.has(30));

// Delete all values from set
numbers.clear();
console.log("Size:", numbers.size);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Is 30 in set? true
Is 50 in set? false
Deleted 30 from set
Is 30 in set? false
Size: 0

ในตัวอย่างนี้ แสดงวิธีการตรวจสอบค่าที่ต้องการค้นหาใน Set และการลบข้อมูลที่เราไม่ต้องการออกไปจาก Set ก่อนอื่นเราสร้างออบเจ็คของ Set เช่นเคย จากนั้นเพิ่มสามตัวเลขเข้าไปยัง Set ด้วยเมธอด add

console.log("Is 30 in set?", numbers.has(30));
console.log("Is 50 in set?", numbers.has(50));

เพื่อตรวจสอบการมีอยู่ของค่าภายใน Set เราสามารถใช้เมธอด has เมธอดส่งค่ากลับเป็น Boolean ว่าค่าดังกล่าวมีอยู่ภายใน Set หรือไม่ ในตัวอย่างเราได้ตรวจสอบว่า 30 และ 50 มีอยู่ในเซ็ตหรือไม่

numbers.delete(30);

เพื่อลบค่าออกจาก Set เราสามารถใช้เมธอด delete เมธอดนี้จะการลบข้อมูลดังกล่าวออกจาก Set และการเรียกใช้เมธอด has หลังจากนั้นจะส่งค่ากลับเป็น false

numbers.clear();

เราสามารถใช้เมธอด clear เพื่อลบข้อมูลทั้งหมดออกไปจาก Set ที่จะทำให้มันกลายเป็นเซ็ตที่ว่างเปล่าเหมือนกับตอนที่มันถูกสร้าง และทำให้มันมีขนาดเป็น 0 จากการอ่านค่าจาก Property size

การวนรอบ Set

มีสองเมธอดที่ใช้ในการวนค่าภายใน Set ได้แก่ เมธอด forEach ใช้สำหรับวนแต่ละค่าภายใน Set ผ่านฟังก์ชัน Callback และเมธอด values ที่ส่งค่ากลับเป็น Iterator ออบเจ็คที่สามารถนำไปวนรอบด้วยคำสั่งวนซ้ำได้ ในการวนรอบค่าใน Set นั้นลำดับของการวนค่าใน Set นั้นจะเหมือนกับตอนที่มันถูกเพิ่มเข้าไปเสมอ นี่เป็นตัวอย่าง

let names = new Set();

names.add("Andrew");
names.add("Chris");
names.add("Josep");
names.add("Metin");

console.log("1. Using foreach method");

// Using foreach method
names.forEach(function (value) {
    console.log(value);
});

console.log("2. Using iterator values method");

// Using iterator method
for (let value of names.values()) {
    console.log(value);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

1. Using foreach method
Andrew
Chris
Josep
Metin
2. Using iterator values method
Andrew
Chris
Josep
Metin

ในตัวอย่าง เป็นการวนรอบค่าใน Set โดยการใช้งานสองเมธอดของ Set คือเมธอด forEach และเมธอด values ทั้งสองเมธอดนั้นให้ผลลัพธ์การทำงานที่เหมือนกัน

names.forEach(function (value) {
    console.log(value);
});

เมธอด forEach วนรอบค่าใน Set โดยส่งค่าแต่ละรอบของการวนไปยังพารามิเตอร์ value ในฟังก์ชัน Callback ที่เรากำหนดให้กับเมธอด เราสามารถนำค่าที่ได้มาใช้งานภายในฟังก์ชันนี้ ในตัวอย่างเราเพียงแสดงค่าที่วนได้ออกทางหน้าจอ

for (let value of names.values()) {
    console.log(value);
}

อีกวิธีหนึ่งในการวนรอบค่าใน Set คือการใช้งานเมธอด values เมธอดนี้ส่งค่ากลับเป็น Iterator ออบเจ็คที่สามารถใช้ร่วมกับคำสั่ง for of ได้ ในการวนแต่ละรอบเราได้ค่าใน Set มาเก็บในตัวแปร value เพื่อใช้งาน

การดำเนินการเกี่ยวกับ Set

การดำเนินการเกี่ยวกับ Set หรือ Set operation คือการดำเนินการพื้นฐานของ Set เช่น Intersection, Union และ Difference ซึ่งการดำเนินการเหล่านี้ไม่ได้มาพร้อมกับคลาส Set ในภาษา JavaScript ในกรณีที่เราต้องการมัน เราจะต้องเขียนมันขึ้นมาเอง นี่เป็นตัวอย่างการเขียนโปรแกรมสำหรับการดำเนินเกี่ยวกับ Set ในภาษา JavaScript

function intersect(a, b) {
    let c = new Set();
    for (let value of b.values()) {
        if (a.has(value)) {
            c.add(value);  
        }   
    }
    return c;
}

function union(a, b) {
    let c = new Set(a);
    for (let value of b.values()) {
        if (!a.has(value)) {
            c.add(value);  
        }   
    }
    return c;
}

function different(a, b) {
    let c = new Set(a);
    for (let value of b.values()) {
        if (a.has(value)) {
            c.delete(value);  
        }   
    }
    return c;
}

let A = new Set([1, 2, 3, 4, 5]);
let B = new Set([3, 4, 5, 6]);

console.log("Intersection: A & B");
console.log(intersect(A, B));
console.log("Union: A & B");
console.log(union(A, B));
console.log("Difference: A & B");
console.log(different(A, B));

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Intersection: A & B
Set(3) { 3, 4, 5 }
Union: A & B
Set(6) { 1, 2, 3, 4, 5, 6 }
Difference: A & B
Set(2) { 1, 2 }

ในตัวอย่างนี้ เราได้เขียนฟังก์ชันสำหรับการดำเนินการพื้นฐานเกี่ยวกับ Set นั่นคือ Intersection, Union และ Difference ซึ่งฟังก์ชันเหล่านี้รับสอง Set เป็นพารามิเตอร์และส่งค่ากลับเป็น Set ใหม่จากการดำเนินการด้วยวิธีการต่างๆ

function intersect(a, b) {
    let c = new Set();
    for (let value of b.values()) {
        if (a.has(value)) {
            c.add(value);  
        }   
    }
    return c;
}

ฟังก์ชัน intersect คือการดำเนินการ Intersection ระหว่าง Set สองเซ็ต ฟังก์ชันส่งค่ากลับเป็นเซ็ตใหม่ที่มีค่าอยู่ทั้งในเซ็ต a และ b

function union(a, b) {
    let c = new Set(a);
    for (let value of b.values()) {
        if (!a.has(value)) {
            c.add(value);  
        }   
    }
    return c;
}

ฟังก์ชัน union คือการดำเนินการแบบ Union ที่ส่งค่ากลับเป็นเซ็ตใหม่จากการรวมกันของเซ็ต a และ b และค่าที่ซ้ำกันจะถูกนำออกให้เหลือเพียงค่าเดียว

function different(a, b) {
    let c = new Set(a);
    for (let value of b.values()) {
        if (a.has(value)) {
            c.delete(value);  
        }   
    }
    return c;
}

ฟังก์ชัน different คือการดำเนินการที่หาผลต่างระหว่างเซ็ต ฟังก์ชันนี้ส่งค่ากลับเป็นเซ็ตใหม่ที่มีค่าอยู่ใน a และไม่อยู่ใน b

Set และอาเรย์

ในส่วนสุดท้ายของบทนี้ เราจะพูดถึงความสัมพันธ์ระหว่าง Set กับอาเรย์ ในภาษา JavaScript เราสามารถแปลง Set เป็นอาเรย์ และแปลงอาเรย์เป็นเซ็ตได้ นี่เป็นตัวอย่างในการแปลงอาเรย์เป็นเซ็ตในภาษา JavaScript

let numbers = new Set([1, 2, 3, 4, 5]);
let chars = new Set(["A", "B", "C", "C", "D", "D"]);

console.log(numbers);
console.log(chars);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Set(5) { 1, 2, 3, 4, 5 }
Set(4) { 'A', 'B', 'C', 'D' }

เพื่อแปลงอาเรย์เป็น Set เราสามารถส่งอาเรย์ผ่านคอนสตรัคเตอร์ในตอนที่สร้างออบเจ็ค Set ได้ ข้อมูลในอาเรย์จะถูกเพิ่มเข้าสู่ Set และค่าที่ซ้ำกันจะถูกทำให้เหลือเพียงค่าเดียว ในตัวอย่างเราได้แปลงอาเรย์ของตัวเลขและตัวอักษรให้เป็น Set

ในทางกลับกัน ถ้าหากเรามีเซ็ตและต้องการแปลงเป็นอาเรย์ เราสามารถทำเช่นนี้ได้ด้วยเมธอด Array.from เมธอดนี้ใช้สำหรับแปลง Iterable ออบเจ็คเป็นอาเรย์ และเซ็ตเป็นหนึ่งในออบเจ็คดังกล่าว นี่เป็นตัวอย่าง

let names = new Set();

names.add("Andrew");
names.add("Chris");
names.add("Josep");
names.add("Metin");

let myArray = Array.from(names);
console.log(myArray);

และนี่เป็นผลลัพธ์จากการแปลง Set ไปยังอาเรย์

[ 'Andrew', 'Chris', 'Josep', 'Metin' ]

เราได้แปลง Set เป็นอาเรย์ด้วยเมธอด Array.from และแสดงค่าในตัวแปรอาเรย์ออกทางหน้าจอ จะเห็นว่าลำดับของข้อมูลในอาเรย์จะเหมือนกับ Set เสมอ

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการใช้งาน Set ในภาษา JavaScript เราได้พูดถึงการใช้งานเมธอดเพื่อเพิ่ม ลบ และตรวจสอบข้อมูลภายใน Set การวนรอบ Set ตัวอย่างการเขียนฟังก์ชันสำหรับการดำเนินการพื้นฐานเกี่ยวกับ Set และการแปลงอาเรย์เป็น Set และในทางกลับกัน