COOL IT IDEAS AND STUFF
7 Amazing JavaScript Array Methods That Only 2% of Developers Know
09-Apr-25
คัมภีร์เทพ IT
See the original english version Click here!
JavaScript ถูกใช้งานอย่างแพร่หลาย และมันก็มี Methods ที่ Developers หลายคนก็อาจยังไม่รู้จัก แต่กลับมีประโยชน์ต่อการทำงานอย่างมาก บทความนี้จึงมาแนะนำ 7 Array Methods สุดเจ๋งใน JavaScript ที่ช่วยให้ทำงานสะดวกขึ้น ซึ่งพวกมันจะช่วยให้คุณทำงานด้วยความสนุกและสะดวกมากขึ้นอย่างน่าประหลาดใจ
1. copyWithin()
ลองนึกภาพการคัดลอกพิซซ่าหนึ่งชิ้น แต่แทนที่คุณจะได้ชิ้นใหม่ คุณกลับยัดมันกลับเข้าไปในกล่องเดิมจนดูแน่นไปหมด
นั่นคือสิ่งที่ copyWithin() ทำ นั่นคือคัดลอกส่วนหนึ่งของ Array ไปยังตำแหน่งอื่นภายใน Array เดียวกัน มันไม่ได้เพิ่มความยาว ดังนั้นจึงไม่มี Elements เพิ่มเติม
ในที่นี้ Elements จาก Index 3 (4, 5) จะถูกคัดลอกให้เริ่มที่ Index 0 แทนที่ 1 และ 2 คุณยังสามารถระบุ Index ท้ายที่เป็นทางเลือกเพื่อจำกัดส่วนที่คัดลอกได้
2. at() และ with()
ทั้งสองอย่างนี้เป็นสิ่งใหม่ที่น่าสนใจ โดย at() เกิดขึ้นก่อน ซึ่งทำให้เราเข้าถึง Elements ต่าง ๆ ได้อย่างสะดวกสบาย โดยเฉพาะเมื่อใช้ Negative Indexing จากนั้น with() ก็เกิดขึ้นมาในปี 2023 โดยมอบทางเลือกในการแทนที่ Elements ใน Array แบบไม่เปลี่ยนแปลงข้อมูลเดิม
at() เหมาะสมอย่างยิ่งในกรณีที่คุณต้องการทำงานกับ Array ที่ด้านหลัง และ with() จะช่วยให้ข้อมูลเดิมของ Array ไม่ถูกเปลี่ยนแปลงในขณะทำการอัปเดต
3. reduceRight()
เชื่อว่า ทุกคนคงจะรู้จัก reduce() กันอยู่แล้ว เพราะมันเป็นเหมือนมีดพับสวิส (ที่มีหลายฟังก์ชันการใช้งาน) ของ Array Methods แต่คุณเคยอยากทำแบบย้อนกลับบ้างไหม ลองใช้ reduceRight() ที่จะประมวลผล Array จากขวาไปซ้าย
ในตัวอย่างนี้ reduceRight() จะรวม Elements เริ่มต้นจากด้านหลัง ส่งผลให้เกิดการเรียงต่อกันในแบบย้อนกลับ
4. findLast()
พบกับความลับที่ปกปิดไว้อย่างดีของ ES13 นั่นคือ findLast() ซึ่งทำงานเหมือนกับ find() แต่มันจะเริ่มค้นหาจากท้ายสุดของ Array ก่อน
สิ่งนี้มีประโยชน์ในกรณีเมื่อคุณรู้ว่า Item ที่คุณกำลังค้นหา อยู่ใกล้กับส่วนท้ายของ Array
แตกต่างจาก find() ที่ค้นหาจากส่วนต้นของ Array แต่ findLast() จะค้นหาจากส่วนท้ายสุด ซึ่งทำให้เหมาะสำหรับสถานการณ์ที่ต้องการหาผลลัพธ์ที่เกิดขึ้นครั้งสุดท้ายของค่าประเภทหนึ่ง ๆ
5. toSorted(), toReversed(), toSpliced()
มารู้จักกับญาติของ sort(), reverse(), และ splice() ที่มีลักษณะ Immutable ซึ่งถูกเพิ่มเข้ามาใน ES2023 โดยมันทำให้เราสามารถจัดการกับ Array ได้โดยไม่ทำให้ข้อมูลเดิมเปลี่ยนแปลง
ทำไมคุณถึงควรสนใจพวกมันล่ะ ก็เพราะการ Debug จะง่ายขึ้นหลายเท่าเมื่อค่าตัวแปรของคุณไม่เปลี่ยนไปอย่างลึกลับ
Methods เหล่านี้ช่วยให้คุณทำการเปลี่ยนแปลงได้โดยไม่กระทบกับ Array เดิม ซึ่งช่วยให้ Code ของคุณคาดเดาได้ง่ายขึ้นและ Debug ได้สะดวกขึ้น
6. lastIndexOf()
lastIndexOf() ซึ่งเป็นเหมือนพี่น้องของ indexOf() โดยมันจะหาตำแหน่งการปรากฏตัวสุดท้ายของ Element ใน Array อีกทั้งคุณยังสามารถระบุตำแหน่งที่ต้องการหยุดค้นหาได้อีกด้วย
Method นี้มีประโยชน์เมื่อคุณทำงานกับ Array ที่อาจมี Elements ซ้ำกัน และคุณต้องการหาตัวสุดท้ายที่ตรงกับค่าที่กำหนด
7. flatMap()
ทำไมต้องเลือกใช้ map() และ flat() แยกกันในเมื่อคุณสามารถรวมทั้งสอง Methods นี้ให้เป็นการทำงานเดียวกันได้ โดยเจ้า flatMap() นี้จะเปลี่ยน Array ของคุณและทำให้ผลลัพธ์ Flat ลงอีก 1 ระดับ
มันเหมือนเป็นการกำจัดปัญหาทั้งสองไว้ในคำสั่งเดียว แถมยัง Clean ขึ้น เร็วขึ้นและน่าพอใจขึ้นเล็กน้อย
สรุป
และนี่ก็เป็น 7 Array Methods สุดเจ๋งใน JavaScript ที่ช่วยให้ทำงานสะดวกขึ้น แม้พวกมันอาจจะไม่เป็นที่รู้จักมากนัก แต่พวกมันก็มีประโยชน์อย่างมาก ขอแนะนำให้คุณลองใช้งานดู เพราะคุณอาจจะทำให้เพื่อนร่วมงานของคุณประทับใจหรืออย่างน้อยก็ทำให้พวกเขาทึ่งในการ Review Code
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด