มาเรียนรู้วิธีดึงอิลีเมนต์สุดท้ายของอาร์เรย์ด้วย JavaScript แบบดิบ 3 วิธีต่างกัน ก่อนอื่นมาสร้างอาร์เรย์ของรายการ เพื่อมีสิ่งให้ทำงาน ในกรณีนี้ใช้รายการออกกำลังกาย
สร้าง Exercise Array
const exercises = ['pull-up', 'push-up', 'squat', 'deadlift']หากเราอยากดึงตัวแรกในรายการ เราใช้ exercises[0] ตัวที่สองใช้ exercises[1] แต่ถ้าเราไม่รู้จำนวนออกกำลังกายทั้งหมดในรายการ?
ไม่เป็นไร มีหลายวิธีทำได้
1. หาอิลีเมนต์สุดท้ายด้วย array.length
ในวิธีแรก เราจะใช้พร็อพเพอร์ตี้ array.length ของ JavaScript เพื่อใช้งาน เราต้องตั้งตัวแปรก่อน แล้วกำหนดอาร์เรย์ให้:
const lastExercise = exercises[exercises.length - 1]ตอนนี้ถ้าคุณรัน console.log(lastExercise) คอนโซลจะแสดงอิลีเมนต์สุดท้ายของอาร์เรย์ ในกรณีนี้คือ deadlift
2. หาอิลีเมนต์สุดท้ายด้วย pop()
เรายังสามารถใช้เมธอดอาร์เรย์ของ JavaScript ชื่อ pop() ซึ่งก็ดึงอิลีเมนต์สุดท้ายของอาร์เรย์แต่อย่างอื่น ลองดู:
exercises.pop()เมธอด pop() แน่ใจว่าถึงอิลีเมนต์สุดท้ายในอาร์เรย์ของเรา แต่ระวัง มันไม่เพียงหาอิลีเมนต์สุดท้าย แต่มัน ลบมันด้วย
ถ้าคุณ console.log(exercises) ทันทีด้านล่าง exercises.pop() คุณจะเห็นอาร์เรย์ของคุณมี 3 อิลีเมนต์ แทนที่จะเป็น 4 ตัวเดิม สิ่งนี้อาจจะเป็นสิ่งที่คุณต้องการ หรือไม่ ขึ้นอยู่กับ use case
3. หาอิลีเมนต์สุดท้ายด้วยเมธอด Array slice()
วิธีสุดท้ายที่ผมอยากแสดง คล้ายกับวิธี length แต่ใช้ slice() แทน เช่นนี้:
const lastExercise = exercises.slice(-1)ตอนนี้ถ้าคุณ console.log(lastExercise) คุณจะได้ผลลัพธ์เหมือนตัวอย่าง length นักพัฒนาหลายคนพบว่าเมธอด slice อ่านง่ายกว่า length แต่เสียดายมัน ช้ากว่ามาก ด้านประสิทธิภาพ
เพื่อดูความหมาย ลองรัน slice vs length comparison test บน jsperf.com
คุณควรใช้เมธอดอาร์เรย์ที่ประสิทธิภาพสูงสุด หรือที่อ่านง่ายที่สุด? ไม่มีคำตอบถูกหรือผิด ขึ้นอยู่กับบริบทของคุณ
โดยทั่วไป ผมมักเลือกประสิทธิภาพมากกว่าสะดวกสบายเป็นกฎทั่วไป เช่นเมื่อทำงานกับรูปภาพ ไม่ใช่คำถามขาวดำ ในแง่ของการหาอิลีเมนต์สุดท้ายในอาร์เรย์ง่ายๆ คุณจะไม่สังเกตความแตกต่างประสิทธิภาพระหว่าง slice และ length ในแอปของคุณ เว้นแต่คุณ execute ล้านฟังก์ชันต่อวินาที
ตัดสินใจตลอดเวลาตามบริบท
