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

วิธีใช้ชุดใน JavaScript

คุณมีรายการข้อมูลที่ควรมีเฉพาะค่าที่ไม่ซ้ำหรือไม่? นี่คือที่ที่ประเภทข้อมูลชุด JavaScript ส่องแสงจริงๆ เป็นวัตถุประเภทใหม่ที่ช่วยให้คุณสามารถสร้างคอลเลกชันของค่าที่ไม่ซ้ำกัน ไม่อนุญาตให้ทำซ้ำภายในชุด

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

เซตคืออะไร

ชุดคือชุดของค่าที่ไม่สามารถมีรายการซ้ำกันได้ ชนิดข้อมูลนี้ถูกนำมาใช้ใน ECMAScript 6 โดยเฉพาะอย่างยิ่ง ชุด เป็นคุณลักษณะของภาษาโปรแกรมอื่นๆ มากมาย

รายการมีประโยชน์เพราะช่วยให้คุณเก็บค่าได้หลายค่า รายการรองรับการจัดเก็บค่าที่ซ้ำกัน ซึ่งอาจมีประโยชน์ในสถานการณ์มากมาย

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

มีบางกรณีที่คุณต้องการเก็บเฉพาะค่าที่ไม่ซ้ำในรายการ นั่นคือสิ่งที่คุณต้องการใช้ Set object ค่าในชุดสามารถปรากฏได้เพียงครั้งเดียว

ใน JavaScript ชุดจะถูกประกาศเหมือนกับวัตถุอื่นๆ มาสร้างชุดที่จัดเก็บรายการเค้กที่ชื่นชอบที่รายงานโดยลูกค้าที่โรงน้ำชาในท้องถิ่นกันเถอะ:

let cakes = new Set();
console.log(cakes)

รหัสของเราส่งคืน:Set [] . เราเพิ่งสร้างชุด ขณะนี้ไม่มีค่าใด ๆ ดังที่คุณเห็นจากผลลัพธ์ของโค้ดของเรา เราจะเพิ่มสิ่งเหล่านั้นในครั้งต่อไป

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

เริ่มต้นชุดที่มีค่าเริ่มต้น

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

พิจารณารายการต่อไปนี้:

let cake_list = ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"];

ค่าเหล่านี้ถูกเก็บไว้ในอาร์เรย์ ในการแปลงเป็น Set เราสามารถส่งอาร์เรย์ของเราเมื่อเราสร้าง Set object ใหม่:

let cakes = new Set(cake_list);
console.log(cakes)

รหัสของเราส่งคืน:

Set(3) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake"]

การเพิ่มมูลค่าให้กับชุด

Set object มาพร้อมกับ method ที่เรียกว่า add() ซึ่งทำให้ง่ายต่อการเพิ่มรายการลงในชุด ชื่อของเมธอดที่ใช้ในการเพิ่มรายการไปยังชุดนั้นง่ายต่อการจดจำ:add() .

สมมติว่าเราต้องการเพิ่ม “บอสตันครีมพาย” ในรายการเค้กที่ขายในร้านเบเกอรี่ในท้องถิ่น มาใช้ add() . กันเถอะ วิธีการเพิ่มค่านี้:

cakes.add("Boston Cream Pie");
console.log(cakes);

รหัสของเราส่งคืน:

Set(4) ["Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Boston Cream Pie"]

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

ตรวจสอบว่ามีค่าอยู่ในชุดหรือไม่

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

นั่นคือที่ที่ has() เมธอดเข้ามา has() วิธีช่วยให้คุณตรวจสอบเพื่อดูว่าชุด มี ค่าเฉพาะ อีกครั้ง วิธีการนี้มีชื่อที่จำง่าย!

พิจารณารหัสต่อไปนี้:

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

รหัสของเราส่งคืน:true . has() วิธีคืนค่าบูลีน—จริงหรือเท็จ—ขึ้นอยู่กับว่าชุดมีค่าใดค่าหนึ่ง วิธีนี้คล้ายกับ includes() ที่คุณจะใช้กับอาร์เรย์ แต่ has() ใช้ได้กับชุดเท่านั้น

การลบค่าออกจากชุด

คนทำขนมปังตัดสินใจว่าจะไม่เสิร์ฟชีสเค้กสตรอเบอร์รี่ที่ร้านเบเกอรี่อีกต่อไป สตรอว์เบอร์รี่ชีสเค้กใช้เวลาทำนานกว่าเค้กอื่นๆ และไม่ได้รับความนิยมมากนัก

คุณสามารถลบค่าออกจากชุดโดยใช้ชื่อ delete() กระบวนการ. มาลบค่า “Strawberry Cheesecake” ออกจาก Set กัน:

cakes.delete("Strawberry Cheesecake");
console.log(cakes);

รหัสของเราส่งคืน:

Set(3) ["Lemon Cake", "Carrot Cake", "Boston Cream Pie"]

สตรอเบอรี่ชีสเค้กถูกลบออกจากชุดของเรา

คุณสามารถลบค่าทั้งหมดออกจากชุดโดยใช้ clear() วิธีการ

วนซ้ำในเซ็ต

ชุด เช่น รายการ เป็นอ็อบเจ็กต์ที่ทำซ้ำได้ คุณรู้ว่านั่นหมายถึงอะไร:คุณสามารถทำซ้ำได้

เราจะใช้ for-each loop เพื่อวนซ้ำชุดเค้กของเรา for-each loop ของเราจะตรวจสอบทุกรายการในรายการของเรา—สำหรับแต่ละรายการในรายการ—และพิมพ์ไปที่คอนโซล:

cakes.forEach(cake => {
	console.log(cake);
}

รหัสของเราส่งคืนตัววนซ้ำซึ่งพิมพ์แต่ละค่าใน Set ไปยังคอนโซล:

Lemon Cake
Carrot Cake
Boston Cream Pie

มันง่ายมาก! คุณสามารถใช้ for-of loop:

for (let cake of cakes) {
	console.log(cake);
}

รหัสนี้ส่งคืนผลลัพธ์เดียวกันกับ forEach . ของเรา วนซ้ำ:

Lemon Cake
Carrot Cake
Boston Cream Pie

คุณสามารถเลือกใช้ for loop เพื่อวนซ้ำผ่าน Set ได้ แต่เนื่องจาก Sets เป็นอ็อบเจ็กต์ที่ทำซ้ำได้ จึงง่ายกว่าที่จะใช้ for-each หรือ for-of ลูป

การลบค่าที่ซ้ำกันโดยใช้ Set

เมื่อคุณเริ่มต้นชุดด้วยอาร์เรย์ ค่าที่ซ้ำกันทั้งหมดจะถูกลบออกโดยอัตโนมัติ นี่เป็นคุณสมบัติที่มีประโยชน์อย่างเหลือเชื่อ

สมมติว่าเรามีรายการสั่งเค้กจำนวนหนึ่ง:

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) [ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]

รายการของเราถูกลดค่าลงเหลือหกค่า ค่าเหล่านี้เป็นค่าที่ไม่ซ้ำกันทั้งหมดจากรายการคำสั่งซื้อของเรา เหลือขั้นตอนเดียว

เราต้องแปลงชุดเค้กของเรากลับเป็นรายการเพื่อให้เราสามารถโต้ตอบกับมันได้โดยใช้วิธีการรายการมาตรฐาน เราสามารถทำได้โดยใช้ Array.from() วิธีการ:

let final_cakes = Array.from(unique_cakes);
console.log(final_cakes);

รหัสของเราส่งคืน:

[ "Lemon Cake", "Carrot Cake", "Strawberry Cheesecake", "Chocolate Cake", "Chocolate Fudge Cake", "Red Velvet Cake" ]

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

บทสรุป

Set object อนุญาตให้คุณจัดเก็บรายการของไอเท็มที่สามารถมีค่าที่ไม่ซ้ำกันเท่านั้น ชุดสามารถเริ่มต้นได้จากอ็อบเจ็กต์ iterable ที่มีอยู่ เช่น รายการหรือสตริง

เนื่องจากวัตถุ Set จะลบค่าที่ซ้ำกัน คุณจึงสามารถใช้เป็นวิธีการลบค่าที่ซ้ำกันออกจากอาร์เรย์ได้ เมื่อเสร็จแล้ว คุณสามารถแปลง Set กลับเป็นอาร์เรย์ได้

ตอนนี้คุณพร้อมที่จะเริ่มใช้ชุดใน JavaScript อย่างมืออาชีพแล้ว!