ข้อผิดพลาดในการวนลูปอาร์เรย์ด้วย for-in ใน JavaScript

สำหรับการวนลูปอาร์เรย์ ควรใช้ ลูป for-of อย่างไรก็ตาม บางครั้งผู้เริ่มต้นก็พยายามใช้ ลูป for-in อย่างผิดพลาด ลองมาดูลักษณะของข้อผิดพลาดนี้กัน

สมมติว่าเรามีอาร์เรย์:

let arr = ['a', 'b', 'c'];

ลองวนลูปองค์ประกอบของอาร์เรย์นี้ และเขียนเป็นสตริงเดียว

โปรแกรมเมอร์คนหนึ่งได้แก้ปัญหานี้แล้ว แต่ใช้ลูป for-in ผิดพลาด มาดูกันว่า เขาได้ผลลัพธ์อะไร:

let res = '';

for (let elem in arr) {
	res += elem;
}

console.log(res); // จะแสดง '012'

ดังนั้น ผลลัพธ์ที่ได้คือสตริง '012' ไม่ใช่ 'abc' มาดูกันว่าเหตุใด จึงเกิดเหตุการณ์เช่นนี้

ทำไมอาร์เรย์ถึงถูกวนลูปด้วย for-in ตั้งแต่แรก? ความจริงแล้ว อาร์เรย์ใน JavaScript เป็นกรณีเฉพาะ ของอ็อบเจ็กต์ ดังนั้นในแง่นี้ นี่คือโค้ดที่ถูกต้อง แต่ไม่ควรทำเช่นนี้

เพราะว่าลูป for-in ภายใต้เงื่อนไขบางอย่างอาจดึงข้อมูล ส่วนเกินเข้ามาได้ และนอกเหนือจากองค์ประกอบอาร์เรย์แล้ว คุณอาจได้ข้อมูลที่ไม่ต้องการเพิ่มเข้ามาในระหว่างการวนลูป ให้วนลูปอาร์เรย์ด้วย for-of เท่านั้น

ทีนี้มาดูกันว่าเหตุใดเราจึงเห็น ผลลัพธ์แปลกๆ แบบนี้ ความจริงคือ ในการวนลูปด้วย for-in ในตัวแปร elem นั้น จริงๆ แล้วจะได้ค่าคีย์ แม้ว่าชื่อตัวแปรนี้ จะทำให้สับสนก็ตาม

ลองมาแก้ไขข้อผิดพลาดที่เกิดขึ้น และเขียนโค้ดที่ถูกต้อง:

let arr = ['a', 'b', 'c'];
let res = '';

for (let elem of arr) {
	res += elem;
}

console.log(res); // จะแสดง 'abc'