Check Value Duplicate แบบไม่ต้อง for loop

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

สมมติว่าเรามีข้อมูลเป็น string array โดยมี 6 ค่า

โจทย์มีอยู่ว่า จะต้อง insert value ที่ได้รับมาใส่ array ข้างต้น โดย values ที่อยู่ใน array จะต้องมีค่าไม่ซ้ำ

จากโจทย์ เราจะเห็นว่า เราไม่สามารถ insert value ใส่ใน array ได้ตรงๆ จะต้องมีการเช็ค value เคยมีอยู่ใน array หรือไม่?

ในจังหวะนี้เอง เราสามารถใช้

“forEach” method ของ array

วิธีข้างต้น คือ การเข้าประกาศฟังก์ชั่น ชื่อ “insertNewValue” รับค่า “newValue” ที่เป็นค่า string ที่ต้องการ insert เข้า array

ภายในฟังก์ชั่น มีการ for loop โดยใช้ “forEach” method ของ array เพื่อทำการเช็คว่า new value มีค่าซ้ำกับ value ที่อยู่ภายใน string หรือไม่

โดยวิธีการเช็ค value จะทำการแปลง string value ให้อยู่ในรูปแบบของ lower case (เป็นตัวเล็กทั้งหมด) และทำการ compare โดยใช้ equre operator (===) เช็คทั้ง data type และ value จะต้องมีค่าตรงกัน

วิธีการข้างต้น ทำให้ได้ฟังก์ชั่นสำหรับ insert new value ที่ไม่มีค่าซ้ำกับของเดิม

แต่นอกจากวิธีข้างต้น เราสามารถเขียนโค้ดให้สั้นลงได้ ดังการใช้

“filter” method ของ array

จะสังเกตว่า โค้ดสั้นลง จากจำนวน 6 บรรทัด เหลือเพียง 1 บรรทัด โดยได้ผลลัพธ์เดียวกัน

หลักการทำงานของ “filter” method จะเป็น method ที่รับ callback function สำหรับสร้างเงื่อนไขบางอย่าง เพื่อตรวจสอบ value ภายใน array

โดย callback function เราสร้างขึ้นมาในบรรทัดที่ 6 จะตรวจสอบหา value ภายใน array ที่ตรงกับ new value ที่ถูกส่งเข้ามา ถ้าตรงกัน จะสั่งให้ return true ถ้าไม่พบ value ที่ตรงกันจะถูก return false

Result ที่ได้จาก “filter” method ของ array

ค่า true / false ใน condition เราเขียน จะเป็นตัวกำหนด result ที่ได้จา “filter” method คือ

• ถ้าเป็น true จะได้ array object ของ value ที่อยู่ภายใต้ array ที่พบ โดย size ของ array จะตามขนาดของ value ที่มีค่าตรงกับ condition
• ถ้า for loop จนจบ array ไม่พบ value ที่ตรงกัน จะ return undefined value

ให้ทุกคน Note คำว่า “for loop จนจบ array” เท่ากับ จำนวนครั้งที่ทำจะเท่ากับจำนวนข้อมูลของ array นั่น หมายความว่า ถ้าข้อมูลเรายิ่งโตขึ้นเรื่อยๆ การเช็ค value ว่ามีค่าซ้ำหรือไม่ ยิ่งต้องใช้เวลามากขึ้นตามจำนวนของข้อมูลไปด้วย

นอกจากนี้ “filter” method แล้ว ยังมี methods อื่นๆ ของ array ที่สามารถเรียกใช้งานได้ โดยวิธีการเขียน และ data type ของ result value จะแตกต่างกันไป

“includes” method ของ array

เราสามารถใช้ “includes” method โดยส่ง string value เพื่อนำไปหา value ที่ตรงกัน เมื่อพบ value ที่ตรงกันจะ return true แต่ถ้าไม่พบ จะ return flase

Note. เนื่องจาก sample data ของเราเป็น array ของ string จึงสามารถเรียกใช้ “includes” method ได้ แต่ถ้า array ตั้งต้นเป็น array ของ object อาจจะไม่สามารถเรียกใช้ได้เหมือนตัวอย่างในบรรทัดที่ 5

“find” method ของ array

เราสามารถใช้ “find” method ของ array เพื่อค้นหา value ภายใน array ได้ โดย “find” method จะรับ callback funtion โดยกระบวนการคำนวณ จะเหมือนกับ “filter” method แต่จะแตกต่างกันในส่วนของ result value

Result ที่ได้จาก “find” method ของ array

ค่า true / false ที่ได้จาก condition ภายใน callback function จะเป็นตัวกำหนด result ที่ได้จา “find” method คือ

• ถ้าเป็น true จะได้ object ของ value ที่อยู่ภายใต้ array ที่พบ
• ถ้า for loop จนจบ array ไม่พบ value ที่ตรงกัน จะ return undefined value

วิธีการทั้งหมดที่เขียนมาข้างต้น เป็นเพียงวิธีการพื้นฐานที่เราสามารถนำมาประยุกต์ใช้ได้ตามสถานการณ์

โดยเราอาจจะต้องคำนึงถึง จำนวนของข้อมูลที่เพิ่มขึ้น จำนวนการ execute function เพราะจำนวนที่เพิ่มขึ้น มีผลต่อประสิทธิภาพของ application

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

หัวใจสำคัญ คือ dictionary

dictionary เป็น object ที่ประกอบด้วย key และ value โดย key จะมี data type เป็น string ในส่วนของ value สามารถเป็นค่าอะไรก็ได้

Syntax: key สามารถเป็น string หรือ integer ถ้าคุณเขียน key1 หรือ 1 มันจะถูกแปลงไปเป็น string value

วิธีการสร้าง dictionary และ key-value pairs dynamicaly

การทำข้อมูลให้อยู่ในรูปแบบของ dictionary จะทำให้เราสามารถเข้าถึงข้อมูลโดยใช้ key เป็น pointer ทำให้เราไม่ต้อง for loop เพื่อหา value

โดยการจะกำหนด key นั่น เราจะต้องดูว่า value ที่จะเก็บใน array เป็น primitive value (รวมถึง string data type) หรือ reference / object

ถ้า value เป็น primitive value เราสามารถนำ value มากำหนดเป็น key ได้เลย แต่ต้องระวังเรื่องการเข้าถึง key ที่มี space bar ดังนั้น แนะนำให้เข้าถึง key โดยมีสัญลักษณ์ [] ดังตัวอย่างโค้ดข้างต้นบรรทัดที่ 5 และบรรทัดที่ 10 เพื่อป้องกันการเกิด error ตอน runtime ถ้าไม่พบ key ที่ต้องการเข้าถึง

ถ้า value เป็น reference / object จะต้องกำหนดว่าต้องการใช้ property ที่จะนำมาเป็น key

วิธีการแปลง Array ให้อยู่ในรูปแบบของ Dictionary

การแปลงข้อมูล array ให้อยู่ในรูปแบบของ dictionary ควรทำเพียงครั้งเดียวก่อนเริ่มต้นการนำไปใช้งาน เพื่อลดจำนวนการ for loop ในการแปลงข้อมูล

วิธีแนะนำที่ทรงพลัง

ให้เรากลับไปที่โจทย์ตอนแรก

สมมติว่าเรามีข้อมูลเป็น string array โดยมี 6 ค่า

โจทย์มีอยู่ว่า จะต้อง insert value ที่ได้รับมาใส่ array ข้างต้น โดย values ที่อยู่ใน array จะต้องมีค่าไม่ซ้ำ

วิธีที่จะขอแนะนำ คือ

1. แปลงข้อมูล array ให้อยู่ในรูปแบบของ dictionary (ทำครั้งเดียว)

2. สร้าง insertNewValue function โดยเข้าถึง dictionary เพื่อ insert new value

3. เมื่อต้องการนำ value ไปใช้งานให้แปลงข้อมูล dictionary กลับไปเป็น array โดยใช้คำสั่ง Object.keys

บทสรุป

เราจะสังเกตเห็นว่า แค่เปลี่ยนมุมมองการจัดการข้อมูล และการเข้าถึงข้อมูลโดยใช้ dictionary มาช่วย ทำให้เราสามารถเพิ่มประสิทธิภาพการเข้าถึงข้อมูลโดยไม่ต้อง for loop ซ้ำทุกครั้งที่ต้องการ insert new value

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