JavaScript forEach - วิธีการวนซ้ำอาร์เรย์ใน JS

JavaScript forEach method เป็นหนึ่งในหลาย ๆ วิธีในการวนซ้ำอาร์เรย์ แต่ละวิธีมีคุณสมบัติที่แตกต่างกันและขึ้นอยู่กับคุณว่าจะใช้วิธีใด

ในโพสต์นี้เราจะมาดู JavaScript สำหรับแต่ละวิธีอย่างละเอียดยิ่งขึ้น

พิจารณาว่าเรามีอาร์เรย์ต่อไปนี้ด้านล่าง:

const numbers = [1, 2, 3, 4, 5];

การใช้ "for loop" แบบดั้งเดิมเพื่อวนรอบอาร์เรย์จะเป็นดังนี้:

for (i = 0; i < numbers.length; i++) { console.log(numbers[i]); } 

อะไรทำให้เมธอด forEach () แตกต่างกัน?

นอกจากนี้วิธีการ forEach ยังใช้ในการวนซ้ำอาร์เรย์ แต่จะใช้ฟังก์ชันที่แตกต่างจาก "for loop" แบบคลาสสิก

วิธีการ forEach ส่งผ่านฟังก์ชันการเรียกกลับสำหรับแต่ละองค์ประกอบของอาร์เรย์พร้อมกับพารามิเตอร์ต่อไปนี้:

  • Current Value (จำเป็น) - ค่าขององค์ประกอบอาร์เรย์ปัจจุบัน
  • ดัชนี (ไม่บังคับ) - หมายเลขดัชนีขององค์ประกอบปัจจุบัน
  • Array (ทางเลือก) - วัตถุอาร์เรย์ที่องค์ประกอบปัจจุบันอยู่

ให้ฉันอธิบายพารามิเตอร์เหล่านี้ทีละขั้นตอน

ประการแรกในการวนรอบอาร์เรย์โดยใช้วิธี forEach คุณต้องมีฟังก์ชันเรียกกลับ (หรือฟังก์ชันที่ไม่ระบุชื่อ):

numbers.forEach(function() { // code });

ฟังก์ชันจะดำเนินการสำหรับทุกองค์ประกอบเดียวของอาร์เรย์ ต้องใช้อย่างน้อยหนึ่งพารามิเตอร์ซึ่งแสดงถึงองค์ประกอบของอาร์เรย์:

numbers.forEach(function(number) { console.log(number); });

นั่นคือทั้งหมดที่เราต้องทำเพื่อวนลูปผ่านอาร์เรย์:

หรือคุณสามารถใช้การแสดงฟังก์ชันลูกศร ES6 เพื่อทำให้โค้ดง่ายขึ้น:

numbers.forEach(number => console.log(number));

พารามิเตอร์เสริม

ดัชนี

เอาล่ะตอนนี้มาดำเนินการต่อด้วยพารามิเตอร์ที่เป็นทางเลือก ตัวแรกคือพารามิเตอร์ "ดัชนี" ซึ่งแสดงถึงหมายเลขดัชนีของแต่ละองค์ประกอบ

โดยทั่วไปเราจะเห็นหมายเลขดัชนีขององค์ประกอบหากเรารวมไว้เป็นพารามิเตอร์ที่สอง:

numbers.forEach((number, index) => { console.log('Index: ' + index + ' Value: ' + number); });

อาร์เรย์

พารามิเตอร์อาร์เรย์คืออาร์เรย์เอง นอกจากนี้ยังเป็นทางเลือกและสามารถใช้ได้หากจำเป็นในการดำเนินการต่างๆ มิฉะนั้นถ้าเราเรียกมันว่ามันจะถูกพิมพ์หลายครั้งตามจำนวนองค์ประกอบของอาร์เรย์:

numbers.forEach((number, index, array) => { console.log(array); });

คุณสามารถดูตัวอย่างการใช้งานเมธอด forEach () ได้ในวิดีโอนี้:

รองรับเบราว์เซอร์

วิธีการ Array.forEach ได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมดที่คาดว่า IE เวอร์ชัน 8 หรือก่อนหน้า

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บโปรดไปที่ช่อง Youtube ของฉัน

ขอบคุณสำหรับการอ่าน!