วิธีการใช้เมธอด forEach ของอาร์เรย์จาวาสคริปต์

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

เมธอด forEach ของ JavaScript เรียกใช้ฟังก์ชันที่ให้มาหนึ่งครั้งสำหรับแต่ละองค์ประกอบของอาร์เรย์ ดังนั้นจึงทำให้กระบวนการวนซ้ำผ่านอาร์เรย์ง่ายขึ้น มันไม่เปลี่ยนอาเรย์ดั้งเดิม มีความยืดหยุ่นและมีประสิทธิภาพ และไม่สามารถแยกออกจากลูปด้วยการส่งคืนค่า คุณสมบัติเหล่านี้ทำให้ forEach เป็นเครื่องมือที่มีประโยชน์มากเมื่อต้องจัดการกับอาร์เรย์ในการเขียนโปรแกรม JavaScript ForEach มีประโยชน์อย่างยิ่งเมื่อดำเนินการบางอย่างเมื่อประมวลผลองค์ประกอบของอาร์เรย์ เช่น การพิมพ์แต่ละองค์ประกอบของอาร์เรย์หรือส่งองค์ประกอบของอาร์เรย์ไปยังฟังก์ชัน

1. การใช้งานพื้นฐานของวิธี FOR EACH

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

ย่อหน้าแรก: ตัวอย่างพื้นฐาน:

const array1 = ['a', 'b', 'c'];

array1.forEach(องค์ประกอบ => console.log(องค์ประกอบ));

รหัสนี้จะวนซ้ำผ่านอาร์เรย์ array1 และพิมพ์แต่ละองค์ประกอบออกมา รหัสนี้แสดงการใช้งานโดยตรงของเมธอด forEach ซึ่งก็คือการสำรวจอาร์เรย์

ย่อหน้าที่สอง: การใช้พารามิเตอร์:

รายการ const = ['item1', 'item2', 'item3'];

สำเนา const = [];

items.forEach (ฟังก์ชั่น (รายการ, ดัชนี, อาร์เรย์) {

copy.push(รายการ);

-

ในตัวอย่างนี้ forEach รับองค์ประกอบปัจจุบัน (รายการ) ดัชนี (ดัชนี) และอาร์เรย์ดั้งเดิม (อาร์เรย์) ผ่านพารามิเตอร์ฟังก์ชัน ซึ่งจะช่วยให้ภายในฟังก์ชันไม่เพียงแต่เข้าถึงองค์ประกอบที่กำลังประมวลผลอยู่เท่านั้น แต่ยังช่วยให้ทราบตำแหน่งขององค์ประกอบในอาร์เรย์หรืออ้างอิงโดยตรงถึงอาร์เรย์เอง

2. เปรียบเทียบกับรอบอื่น

เมื่อเปรียบเทียบกับวิธี for loops หรือ map แล้ว forEach จะให้โค้ดที่ง่ายกว่าและใช้งานง่ายกว่าในบางสถานการณ์

ย่อหน้าแรก: การเปรียบเทียบกับ for loop:

for loop เป็นวิธีการพื้นฐานที่สุดในการสำรวจองค์ประกอบอาร์เรย์ใน JavaScript แต่เมื่อเปรียบเทียบกับ for loop แล้ว forEach ให้ไวยากรณ์ที่กระชับและชัดเจนยิ่งขึ้น เมื่อใช้ for loop คุณจะต้องควบคุมเงื่อนไขการเริ่มต้นและสิ้นสุดของลูปด้วยตนเอง ในขณะที่เมธอด forEach จะจัดการปัญหาเหล่านี้โดยอัตโนมัติ

ย่อหน้าที่สอง: เปรียบเทียบกับวิธีแผนที่:

วิธีการ map นั้นคล้ายคลึงกับ forEach ซึ่งทั้งสองวิธีเป็นวิธีการสำรวจผ่านอาร์เรย์ แต่ map ถูกใช้เพื่อสร้างอาร์เรย์ใหม่ ซึ่งประกอบด้วยผลลัพธ์ของการดำเนินการฟังก์ชันเรียกกลับในแต่ละองค์ประกอบของอาร์เรย์ดั้งเดิม ซึ่งหมายความว่าหากจุดประสงค์ของคุณเพียงวนซ้ำอาร์เรย์โดยไม่มีการตั้งค่าผลลัพธ์ การใช้ forEach จะเป็นตัวเลือกที่ดีกว่า

3. การใช้งานขั้นสูง: ทางเลือกแทน BREAK และ CONTINUE

เนื่องจาก forEach ไม่รองรับการใช้ตัวแบ่งเพื่อข้ามออกจากลูปหรือข้ามการวนซ้ำบางลูปต่อไป การดำเนินการเหล่านี้จึงสามารถแทนที่ด้วยวิธีอื่นได้

ย่อหน้าแรก: มีข้อยกเว้นเกิดขึ้น:

อาร์เรย์ const = [1, 2, 3, 4, 5];

พยายาม {

array.forEach((ตัวเลข) => {

console.log(หมายเลข);

ถ้า (num === 3) โยนข้อผิดพลาดใหม่ ('LoopTerminated');

-

} จับ (e) {

ถ้า (e.message !== 'LoopTerminated') โยน e;

-

ในที่นี้ การวนซ้ำจะหยุดลงโดยส่งข้อยกเว้นเมื่อ num เท่ากับ 3 แม้ว่านี่จะเป็นแนวทางที่ใช้ได้ แต่ก็อาจจะน้อยกว่าอุดมคติในการใช้งานจริง เนื่องจากโดยทั่วไปแล้วการจัดการข้อยกเว้นจะถูกนำไปใช้กับการจัดการข้อผิดพลาดมากกว่าโฟลว์การควบคุม

ย่อหน้าที่สอง: ใช้ Array.prototype.every หรือ Array.prototype.some:

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

4. ข้อควรระวัง

มีประเด็นสำคัญบางประการที่ควรทราบเมื่อใช้ forEach เพื่อหลีกเลี่ยงข้อผิดพลาดทั่วไป

ย่อหน้าแรก: อาร์เรย์ว่างจะไม่ถูกวนซ้ำ:

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

ย่อหน้าที่สอง: คุณไม่สามารถเปลี่ยนค่าองค์ประกอบของอาร์เรย์ดั้งเดิมได้โดยตรง:

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

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

คำถามที่พบบ่อยที่เกี่ยวข้อง:

จะใช้วิธี forEach เพื่อวนซ้ำอาร์เรย์ใน JavaScript ได้อย่างไร

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

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

โค้ดตัวอย่างโดยใช้เมธอด forEach เป็นดังนี้:

ให้ myArray = [1, 2, 3, 4, 5];myArray.forEach(function(element) { console.log(element); // พิมพ์ค่าของแต่ละองค์ประกอบ});

โค้ดด้านบนจะวนซ้ำอาร์เรย์ชื่อ myArray และส่งออกแต่ละองค์ประกอบในอาร์เรย์ตามลำดับ

จะแก้ไของค์ประกอบของอาร์เรย์ในวิธี forEach ของ JavaScript ได้อย่างไร

เมื่อวนซ้ำอาร์เรย์โดยใช้เมธอด forEach คุณสามารถแก้ไของค์ประกอบของอาร์เรย์ภายในฟังก์ชันที่ส่งเข้ามาได้ เนื่องจากฟังก์ชันที่ส่งผ่านจะถูกเรียกทุกครั้งที่มีการสำรวจองค์ประกอบ และองค์ประกอบปัจจุบันจะถูกส่งผ่านเป็นพารามิเตอร์

หากต้องการแก้ไของค์ประกอบในอาร์เรย์ คุณสามารถใช้ขั้นตอนต่อไปนี้:

ขั้นแรก สร้างอาร์เรย์เพื่อแก้ไข จากนั้นใช้เมธอด forEach เพื่อวนซ้ำอาร์เรย์และส่งโค้ดภายในฟังก์ชันเพื่อแก้ไของค์ประกอบ ภายในฟังก์ชันที่ส่งเข้ามา คุณสามารถใช้ดัชนีของอาร์เรย์เพื่อเข้าถึงและแก้ไขค่าขององค์ประกอบได้

ตัวอย่างต่อไปนี้สาธิตวิธีการแก้ไขค่าขององค์ประกอบอาร์เรย์ในวิธีการ forEach:

ให้ myArray = [1, 2, 3, 4, 5];myArray.forEach(function(element, index, array) { array[index] = element * 2; // คูณค่าของ element ด้วย 2 และแก้ไขค่า องค์ประกอบอาร์เรย์});console.log(myArray); // เอาต์พุต [2, 4, 6, 8, 10]

โค้ดด้านบนจะวนซ้ำผ่านอาร์เรย์ชื่อ myArray และแก้ไของค์ประกอบในอาร์เรย์โดยการคูณค่าของแต่ละองค์ประกอบด้วย 2

จะใช้เมธอด forEach เพื่อนำผลรวมของอาร์เรย์ใน JavaScript ไปใช้ได้อย่างไร

ใช้เมธอด forEach เพื่อรวมองค์ประกอบในอาร์เรย์ได้อย่างสะดวก หากต้องการใช้เมธอด forEach เพื่อรวมอาร์เรย์ใน JavaScript คุณสามารถทำตามขั้นตอนเหล่านี้:

ขั้นแรก สร้างอาร์เรย์ที่มีตัวเลขที่คุณต้องการหาผลรวม จากนั้นสร้างตัวแปรเพื่อเก็บผลลัพธ์ของผลรวมและกำหนดค่าเริ่มต้นเป็น 0 ใช้เมธอด forEach เพื่อวนซ้ำอาร์เรย์และใช้ฟังก์ชันที่ส่งผ่านภายในเพื่อเพิ่มค่าของแต่ละองค์ประกอบให้กับผลลัพธ์การรวม ภายในฟังก์ชันที่ส่งผ่านเข้าไป สามารถใช้ตัวดำเนินการบวกเพื่อเพิ่มค่าของแต่ละองค์ประกอบลงในผลลัพธ์รวมได้

ตัวอย่างต่อไปนี้สาธิตวิธีการใช้วิธี forEach เพื่อใช้ผลรวมของอาร์เรย์:

la myArray = [1, 2, 3, 4, 5];let sum = 0;myArray.forEach(function(element) { sum += element; // เพิ่มค่าของแต่ละองค์ประกอบเข้ากับผลลัพธ์ผลรวม}) ;console .log(ผลรวม); // เอาต์พุต 15

โค้ดด้านบนจะวนซ้ำผ่านอาร์เรย์ชื่อ myArray และสะสมค่าของแต่ละองค์ประกอบให้เป็นผลรวมของตัวแปร ดังนั้นจึงนำผลรวมของอาร์เรย์ไปใช้

หวังว่าบทความนี้จะช่วยให้คุณเข้าใจและใช้เมธอด forEach ใน JavaScript ได้ดีขึ้น หากคุณมีคำถามใด ๆ โปรดฝากข้อความไว้ในพื้นที่แสดงความคิดเห็น!