สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
# 5 วิธีที่ทำให้ Code Run เร็วขึ้นด้วย JavaScript Sets
JavaScript คือภาษาโปรแกรมมิ่งที่เป็นที่นิยมใช้กันอย่างกว้างขวางในโลกของการเว็บพัฒนา ด้วยคุณสมบัติที่สามารถปรับตัวได้หลากหลายและช่วยให้สามารถสร้าง interaction ที่น่าสนใจบนหน้าเว็บ หนึ่งในฟีเจอร์ที่น่าสนใจของ JavaScript คือการใช้งาน `Set` ซึ่งเป็นโครงสร้างข้อมูลที่ช่วยให้เก็บข้อมูลแต่ละตัวได้อย่างไม่ซ้ำกัน โดยไม่ต้องเขียนโค้ดซับซ้อนเพื่อตรวจสอบความซ้ำซ้อนของข้อมูลเอง ในบทความนี้เราจะมาพูดถึง 5 วิธีที่ `Set` ใน JavaScript สามารถช่วยให้โปรแกรมของคุณทำงานได้เร็วขึ้น
ในหลายๆกรณี เราต้องการตรวจสอบค่าว่ามีการปรากฏมาก่อนหรือไม่ หากเราใช้ array ดั้งเดิมเพื่อเก็บข้อมูล แล้วใช้ loop วนเช็คทีละตัว อาจสิ้นเปลืองเวลาโดยไม่จำเป็น ขณะที่ `Set` ช่วยให้เราทำงานนี้ได้รวดเร็วขึ้นโดยอัตโนมัติ เช่น
const myArray = [1, 1, 2, 3, 4, 5, 5, 5, 6];
const uniqueSet = new Set(myArray);
console.log([...uniqueSet]); // Output: [1, 2, 3, 4, 5, 6]
`Set` เอาเฉพาะข้อมูลที่ไม่ซ้ำกันมาเก็บ ฉะนั้นการที่จะเช็คค่าใน set นั้นทำได้เร็วขึ้นอย่างมากเมื่อเทียบกับการใช้ array ทั่วไป
การใช้งาน `Set` ลดความต้องการในการใช้ index เพื่อเข้าถึงข้อมูลลง ไม่เหมือนกับ arrays ที่เรามักจะต้องใช้ index เพื่อเข้าถึงข้อมูล การใช้ `Set` ช่วยลดข้อผิดพลาดจากการคำนวณ index ซึ่งอาจทำให้โปรแกรม run ช้าลง ตัวอย่างการใช้ `Set`:
const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.forEach(value => {
console.log(value); // Output: 1, 2, 3
});
ในตัวอย่างนี้ ไม่จำเป็นต้องรู้ index ของข้อมูลใดๆ เลย เราสามารถเปิดใช้งานเฉพาะค่าที่มีใน set
เมื่อเราต้องการลบข้อมูลออกจากโครงสร้างข้อมูล `Set` จะมี performance ที่สูง หากเทียบกับ array ปกติ เนื่องจากมันไม่จำเป็นต้อง shift ข้อมูลเหมือน array โดยทั่วไป เช่น
const mySet = new Set([1, 2, 3, 4]);
mySet.delete(2);
console.log([...mySet]); // Output: [1, 3, 4]
การลบข้อมูลจาก `Set` ทำได้ง่ายและไม่ต้องเปลี่ยนค่า index ของข้อมูลอื่นๆ
`Set` ใน JavaScript ไม่จำกัดการเก็บข้อมูลเฉพาะประเภทเดียว หมายความว่าคุณสามารถเก็บทั้งตัวเลข, ข้อความ, วัตถุ หรือแม้กระทั่ง arrays ใน `Set` ได้ ตัวอย่างเช่น:
const mySet = new Set(['hello', { key: 'value' }, [1, 2, 3]]);
mySet.forEach(value => {
console.log(value); // Output: 'hello', { key: 'value' }, [1, 2, 3]
});
ความสามารถนี้ทำให้ `Set` เป็นเครื่องมือที่มีความยืดหยุ่นและสามารถช่วยให้โค้ดของคุณมีโครงสร้างที่ดีขึ้น
ในกรณีที่คุณต้องการแปลง Array ที่มีข้อมูลซ้ำๆ ให้กลายเป็น unique values, `Set` ร่วมกับความสามารถของ Array Destructuring ใน ES6 ช่วยทำงานนี้ได้อย่างรวดเร็ว และลดความซับซ้อนของโค้ดลง:
const myArray = [1, 1, 2, 3, 3, 4];
const uniqueArray = [...new Set(myArray)];
console.log(uniqueArray); // Output: [1, 2, 3, 4]
การใช้ `Set` ร่วมกับ spread operator (...) จะช่วยให้คุณได้ array ใหม่ที่มีแต่ข้อมูลไม่ซ้ำในไม่กี่บรรทัด
จาก 5 ยูสเคสที่เราได้มาทำความรู้จักข้างต้น ไม่เพียงแต่จะช่วยเพิ่มประสิทธิภาพแก่โค้ดของคุณ แต่ยังแสดงวิธีการนำ `Set` ไปใช้ในการโค้ด JavaScript ให้มีประสิทธิภาพมากขึ้น และทำให้โครงสร้างของข้อมูลที่ซับซ้อนนั้นง่ายและรวดเร็วยิ่งขึ้น
การที่คุณค้นคว้าและลองประยุกต์ใช้ความรู้ในการเขียนโค้ดของคุณ ไม่เพียงทำให้โปรแกรมที่คุณพัฒนามีประสิทธิภาพเท่านั้น แต่ยังเป็นการพัฒนาทักษะการเขียนโปรแกรมของคุณเองอีกด้วย ฉะนั้น หากคุณมีความสนใจที่จะรู้จักหรือต้องการทำความเข้าใจเพิ่มเติมเกี่ยวกับ JavaScript หรือโครงสร้างข้อมูลอื่นๆ ที่สามารถช่วยให้โค้ดของคุณดีขึ้น ไม่ต้องลังเลที่จะเรียนรู้และพัฒนาตัวเองไม่จำกัดผ่านหลักสูตรต่างๆ ณ Expert-Programming-Tutor หรือ EPT.
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: javascript set programming data_structure performance array_destructuring efficiency index-based_operations data_storage web_development
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com