forEach/JavaScript
Access to Array members with forEach in JavaScript is a simple and popular iterate method. Use the Array.prototype.forEach method (). Each forEach application will call callback function once for every member in the syntax array. JavaScriptarray.forEach (callback (currentValue, index, array), thisArg);
The function callback description parameter (Required) to be run for each member in the current member currentValue array that is processing the index (Optional) index (index) of the current member array (Optional) the array that is processing thisArg (Optional). The value to be used as this. When running the code sample callback, this is the sample accessing the member in the array and displaying it. JavaScriptconst fruits = ["Apple," "Banana," "Cherry," "Date"];
/ / 1.Just access the value of the member (current value)
console. log ("--- Just access the value ---");
Fruits. Each (function (fruit) {
console. log (fruit);
});
/ / Output:
/ / Apple
/ / Banana
/ / Cherry
/ / Date
/ / 2.Access both values and indexes (currentValue, index) - Arrow Function is recommended
Console.log ("\ n--- Access to values and indexes ---");
Fruits. Each (fruit, index) = > {
console.log ('Fruit at index ${index} is: ${fruit}');
});
/ / Output:
/ / Fruit at index 0 is: Apple
/ / Fruit at index 1 is: Banana
/ / Fruit at index 2 is: Cherry
/ / Fruit at index 3 is: Date
Break / Return: Each forEach is designed to always process every member. If you need a mechanism to stop loops first, you should use a loop for or other methods such as some or every instead of no return value: the forEach method will always restore undefined. Unlike the map or filter method that returns to a new array, change the original value: the callback function can change the original array. If you change the value of the current value, it will not change the value of the array, but if you modify the object located in the array (such as the array of objects). ) That change will affect the original array.
เมธอด forEach ใน JavaScript ถือเป็นเครื่องมือที่ช่วยเขียนโค้ดให้เข้าใจง่ายขึ้นสำหรับการวนซ้ำสมาชิกใน Array อย่างไรก็ตาม หลังจากที่ได้ลองใช้จริง ผมพบว่ามันเหมาะอย่างยิ่งสำหรับงานที่ต้องการประมวลผลหรือแสดงผลข้อมูลใน Array แต่ไม่เหมาะกับกรณีที่ต้องการหยุดลูประหว่างกลาง เพราะ forEach ไม่รองรับการใช้ break หรือ return เพื่อออกจากลูป นอกจากนี้ forEach จะไม่มีค่าคืนกลับมาใช้ในผลลัพธ์ ซึ่งต่างจากเมธอด map หรือ filter ที่ส่งคืน Array ใหม่ ในการพัฒนาจริง ผมจึงมักจะเลือกใช้ forEach เมื่อต้องการประมวลผลข้อมูลและแสดงผลอย่างเดียว และใช้ map หรือ filter เมื่อจำเป็นต้องแปลงข้อมูลหรือกรองข้อมูลเป็น Array ใหม่ อีกอย่างหนึ่งที่น่าสนใจคือการเข้าใจว่าการเปลี่ยนแปลงค่าภายใน callback ของ forEach จะไม่ส่งผลต่อสมาชิกเดิมใน Array หากเป็นค่าธรรมดา (primitive) แต่หากสมาชิกใน Array เป็นออบเจกต์ การแก้ไขออบเจกต์ใน callback จะส่งผลกับ Array ต้นฉบับด้วย เช่น การเพิ่มหรือลบค่าในออบเจกต์ ทำให้ต้องระวังการเปลี่ยนแปลงข้อมูลโดยไม่ได้ตั้งใจ สุดท้าย การใช้งาน forEach ร่วมกับรูปแบบ Arrow Function จะช่วยให้โค้ดสั้นลงและอ่านง่ายขึ้น เช่น การใช้ (value, index) => { ... } และผมแนะนำให้ฝึกเขียนโค้ดด้วยรูปแบบนี้บ่อย ๆ เพราะนอกจากสวยงามแล้วยังช่วยลดข้อผิดพลาดในเรื่องของ this และ context ได้ด้วย
