JavaScript Set: คู่มือสำหรับผู้เริ่มต้น

การใช้งาน Sets ใน JavaScript

มีรายการข้อมูลที่ต้องการค่า unique เท่านั้น (ไม่ซ้ำกัน)? JavaScript Set คือชนิดข้อมูลที่ตอบโจทย์จุดนี้พอดี เป็นอ็อบเจ็กต์ชนิดใหม่ที่สร้างคอลเลกชันของค่า unique ไม่มี duplicate

บทความนี้จะอธิบาย Sets คืออะไร ทำงานอย่างไร เมื่อไหร่ควรใช้ และตัวอย่างเมธอดต่างๆ ของ Set

Set คืออะไร?

Set คือชุดค่าที่ไม่สามารถมีค่าซ้ำได้ ชนิดข้อมูลนี้เพิ่มเข้ามาใน ECMAScript 6 (ES6) พบได้ในภาษาโปรแกรมอื่นๆ หลายภาษา

Array (ลิสต์) เก็บค่าซ้ำได้ เหมาะสำหรับบางกรณี เช่น รายการสั่งกาแฟ ลูกค้าสองคนสั่งเครื่องดื่มเดียวกัน

แต่บางครั้งต้องการเก็บแค่ค่า unique เท่านั้น นั่นคือเวลาที่ควรใช้ Set ค่าใน Set จะปรากฏได้เพียงครั้งเดียว

สร้าง Set และเพิ่มค่า

let cakes = new Set();
console.log(cakes); // Set []

สร้าง Set พร้อมค่าเริ่มต้นจาก Array

let cake_list = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"];
let cakes = new Set(cake_list);
console.log(cakes); // Set(3) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"]

เพิ่มค่าด้วย add()

cakes.add("Boston Cream Pie");
console.log(cakes); // Set(4) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Boston Cream Pie"]

หากเพิ่มค่าที่มีอยู่แล้ว จะไม่เพิ่มเข้าไป (ไม่ซ้ำ)

ตรวจสอบค่าด้วย has()

var has_boston_cream_pie = cakes.has("Boston Cream Pie");
console.log(has_boston_cream_pie); // true

คืนค่า boolean (true/false)

ลบค่าด้วย delete() และ clear()

cakes.delete("Strawberry Cheesecake");
console.log(cakes); // Set(3) ["Lemon Cake", "Carrot Cake", "Boston Cream Pie"]

cakes.clear(); // ลบทั้งหมด

วนลูปผ่าน Set

Set เป็น iterable object ใช้ forEach หรือ for...of ได้

cakes.forEach(cake => { console.log(cake); });
// หรือ
for (let cake of cakes) { console.log(cake); }

ลบค่าซ้ำจาก Array ด้วย Set

เมื่อสร้าง Set จาก Array ค่าซ้ำจะถูกลบอัตโนมัติ

var cakes = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Lemon Cake", "Chocolate Cake", "Chocolate Fudge Cake", "Chocolate Cake", "Red Velvet Cake"];
var unique_cakes = new Set(cakes);
console.log(unique_cakes); // Set(6) [ค่า unique 6 ค่า]

// แปลงกลับเป็น Array
let final_cakes = Array.from(unique_cakes);
console.log(final_cakes); // Array ปกติ ใช้เมธอด array ได้หมด

สรุป

Set object เก็บรายการที่มีค่า unique เท่านั้น สร้างได้จาก iterable objects (array, string) ใช้ลบค่าซ้ำจาก array ได้ แล้วแปลงกลับเป็น array ด้วย Array.from() เพื่อใช้เมธอด array ต่อได้