การประมวลผลซ้ำใน JavaScript
ในบทความนี้ เราจะอธิบายการประมวลผลซ้ำใน JavaScript
YouTube Video
คำสั่ง for ใน JavaScript
ไวยกรณ์พื้นฐาน
1for (initialization; condition; update) {
2 // Code to repeat
3}คำสั่ง for ใน JavaScript เป็นไวยากรณ์สำหรับการทำการวนซ้ำ มันจะดำเนินการบล็อกโค้ดที่กำหนดซ้ำ ๆ ตราบใดที่เงื่อนไขที่กำหนดยังคงเป็นจริง โดยการใช้คำสั่ง for สามารถดำเนินกระบวนการเดียวกันได้อย่างมีประสิทธิภาพหลายครั้ง
- การกำหนดค่าเริ่มต้น (
initialization): ส่วนที่ถูกดำเนินการเพียงครั้งเดียวก่อนเริ่มลูป กำหนดตัวแปรเริ่มต้น เช่น ตัวนับลูป - เงื่อนไข (
condition): เงื่อนไขที่กำหนดว่าจะดำเนินการลูปต่อหรือไม่ หากtrueลูปจะดำเนินต่อ; หากfalseลูปจะสิ้นสุด - การอัปเดต (
update): ดำเนินการเมื่อสิ้นสุดแต่ละลูปเพื่ออัปเดตตัวนับลูป
ตัวอย่าง
1for (let i = 0; i < 5; i++) {
2 console.log(i);
3}ในกรณีนี้, i เริ่มต้นที่ 0 และลูปจะดำเนินการตราบใดที่ i < 5 เป็น true i++ เพิ่มค่า i ทีละ 1 ในแต่ละรอบของลูป ผลลัพธ์คือ ตัวเลขตั้งแต่ 0 ถึง 4 จะถูกแสดง
ขอบเขตของตัวนับลูป
ประกาศหรือกำหนดตัวแปรในส่วนการกำหนดค่าเริ่มต้นของคำสั่ง for ตัวแปรที่ประกาศในที่นี้จะใช้ได้เฉพาะภายในลูปเท่านั้น
1for (let i = 0; i < 3; i++) {
2 console.log(i); // Outputs 0, 1, 2
3}
4console.log(i); // ReferenceError
- ตามที่แสดงในตัวอย่างนี้ การอ้างถึงตัวแปรที่อยู่นอกคำสั่ง
forจะทำให้เกิดข้อผิดพลาด
การวนลูปไม่รู้จบ
การตั้งค่าเงื่อนไขที่ไม่สิ้นสุดจะนำไปสู่การวนลูปไม่รู้จบ สิ่งนี้อาจทำให้เบราว์เซอร์หรือระบบทำงานหนัก ดังนั้นจึงควรใช้อย่างระมัดระวัง
1for (;;) {
2 console.log("Infinite loop");
3 break; // Exits the infinite loop with break
4}อาเรย์และคำสั่ง for
การใช้คำสั่ง for ควบคู่กับอาเรย์เป็นเรื่องที่พบบ่อย มันสะดวกสำหรับการประมวลผลแต่ละองค์ประกอบของอาร์เรย์
ตัวอย่าง
1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4 console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"
วิธีนี้คุณสามารถประมวลผลแต่ละองค์ประกอบของอาร์เรย์โดยใช้ดัชนี
โครงสร้างลูปแบบอื่น ๆ
คำสั่ง for...of
คำสั่ง for...of ใช้สำหรับอ็อบเจ็กต์ที่วนซ้ำได้ เช่น อาร์เรย์และสตริง
1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4 console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"
วิธีนี้ช่วยให้คุณประมวลผลแต่ละองค์ประกอบได้โดยไม่ต้องใช้ดัชนี
คำสั่ง for...in
คำสั่ง for...in ใช้ในการวนซ้ำผ่านคุณสมบัติของอ็อบเจ็กต์
1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4 console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"
ดังนี้คุณสามารถดำเนินการกับแต่ละองค์ประกอบโดยใช้คีย์
สรุป
- คำสั่ง
forเป็นโครงสร้างลูปที่มีสามส่วน: การเริ่มต้น เงื่อนไข และการอัพเดต - คุณสามารถควบคุมพฤติกรรมของลูปได้โดยใช้
breakหรือcontinue - เมื่อใช้ร่วมกับอาร์เรย์หรืออ็อบเจ็กต์ องค์ประกอบหรือคุณสมบัติสามารถประมวลผลได้อย่างมีประสิทธิภาพ
คำสั่ง while ใน JavaScript
ไวยกรณ์พื้นฐาน
1while (condition) {
2 // Code that repeats while the condition is true
3}คำสั่ง while ใน JavaScript เป็นโครงสร้างลูปที่ดำเนินการซ้ำตราบเท่าที่เงื่อนไขที่ระบุเป็น true คล้ายกับคำสั่ง for คำสั่ง while ระบุเฉพาะเงื่อนไข
- เงื่อนไข: เขียนนิพจน์เงื่อนไขที่กำหนดว่าจะทำการวนซ้ำต่อหรือไม่ ลูปจะดำเนินต่อไปเมื่อ
trueและสิ้นสุดเมื่อเป็นfalse
ตัวอย่าง
1let i = 0;
2
3while (i < 5) {
4 console.log(i);
5 i++;
6}
7console.log(i); // 5
ในตัวอย่างนี้ ลูปเริ่มต้นด้วยตัวแปร i เป็น 0 และดำเนินการตราบเท่าที่ i < 5 เป็น true ในแต่ละรอบของลูปค่า i จะเพิ่มขึ้นทีละ 1 และเมื่อ i กลายเป็น 5 เงื่อนไขจะกลายเป็น false และลูปจะจบลง ผลลัพธ์คือคำสั่ง while จะแสดงจาก 0 ถึง 4
ไม่เหมือนกับคำสั่ง for ในคำสั่ง while การเริ่มต้นและการอัปเดตตัวแปรจะเขียนเป็นคำสั่งแยกต่างหาก คุณยังสามารถอ้างอิงตัวแปรหลังคำสั่ง while ได้ ในกรณีนี้ จะแสดง 5 หลังจากคำสั่ง while สิ้นสุดลง
การวนลูปไม่รู้จบ
หากเงื่อนไขเป็น true ตลอดเวลา จะเกิดลูปที่ไม่สิ้นสุด ควรหลีกเลี่ยงลูปที่ไม่สิ้นสุด แต่ถ้าใช้อย่างตั้งใจ คุณสามารถหยุดลูปได้ด้วยคำสั่ง break
ตัวอย่าง
1while (true) {
2 console.log("Infinite loop");
3 break; // Ends the loop with `break`
4}การประมวลผลอาร์เรย์ด้วยลูป while
สามารถประมวลผลอาร์เรย์ด้วยคำสั่ง while ได้เช่นกัน
ตัวอย่าง
1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5 console.log(fruits[i]);
6 i++;
7}
8// Outputs "apple", "banana", "cherry"
คำสั่ง do...while
ไวยกรณ์พื้นฐาน
1do {
2 // Code that is executed at least once
3} while (condition);คำสั่ง do...while ซึ่งเป็นรูปแบบหนึ่งของคำสั่ง while จะตรวจสอบเงื่อนไขหลังจากที่ทำลูปไปแล้วอย่างน้อยหนึ่งครั้ง ในขณะที่คำสั่ง while จะตรวจสอบเงื่อนไขก่อน คำสั่ง do...while จะทำกระบวนการอย่างน้อยหนึ่งครั้งก่อนตรวจสอบเงื่อนไข
ตัวอย่าง
1let i = 0;
2
3do {
4 console.log(i);
5 i++;
6} while (i < 5);ในตัวอย่างนี้ จะแสดงค่าของ i ตั้งแต่ 0 ถึง 4 คำสั่ง do...while แตกต่างจากคำสั่ง while ตรงที่มันจะถูกดำเนินการอย่างน้อยหนึ่งครั้งเสมอ แม้ว่าเงื่อนไขจะเป็น false
สรุป
- คำสั่ง
whileใช้เพื่อดำเนินการโค้ดซ้ำ ๆ ตราบใดที่เงื่อนไขเป็นtrue - ระวังการเกิดลูปไม่มีที่สิ้นสุด แต่คุณสามารถควบคุมการไหลของลูปโดยใช้
breakและcontinue - คำสั่ง
do...whileมีประโยชน์เมื่อคุณต้องการทำงานในลูปอย่างน้อยหนึ่งครั้ง
break และ continue
คุณสามารถใช้ break และ continue ภายในลูปได้
breakใช้เพื่อยุติลูปก่อนเวลาอันควรcontinueข้ามการวนลูปปัจจุบันและไปยังการวนลูปครั้งถัดไป
ตัวอย่างการใช้ break
1for (let i = 0; i < 10; i++) {
2 if (i === 5) {
3 break; // Exits the loop when i is 5
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 2, 3, 4
8
9let i = 0;
10
11while (i < 10) {
12 if (i === 5) {
13 break; // Ends the loop when i is 5
14 }
15 console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4
ในกรณีนี้ จะใช้ break เมื่อ i มีค่าเป็น 5 ผลลัพธ์คือ ตัวเลขตั้งแต่ 0 ถึง 4 จะถูกแสดง
ตัวอย่างการใช้ continue
1for (let i = 0; i < 5; i++) {
2 if (i === 2) {
3 continue; // Skips when i is 2
4 }
5 console.log(i);
6}
7// Outputs 0, 1, 3, 4
8
9let i = 0;
10while (i < 5) {
11 i++;
12 if (i === 3) {
13 continue; // Skips when i is 3
14 }
15 console.log(i);
16}
17// Outputs 1, 2, 4, 5
ในกรณีนี้ จะใช้ continue เมื่อ i มีค่าเป็น 2 ผลลัพธ์คือจะแสดงตัวเลขที่ไม่ใช่ 2
ลูปซ้อนกันใน JavaScript
ใน JavaScript การเขียนโปรแกรมโครงสร้าง ลูปซ้อนกัน คือโครงสร้างที่มีลูปหนึ่งอยู่ภายในอีกลูปหนึ่ง ลูปลักษณะนี้มีประสิทธิภาพมากเมื่อใช้งานอัลกอริทึมหรือกระบวนการที่ครอบคลุมหลายมิติหรือหลายชั้น ตัวอย่างเช่น การประมวลผลอาร์เรย์หลายมิติที่มีอาร์เรย์ซ้อนกันเป็นกรณีที่พบได้ทั่วไป
ในที่นี้ เราจะอธิบายโครงสร้างพื้นฐานของลูปซ้อนกัน ตัวอย่างการใช้งาน ข้อควรระวัง และการพิจารณาการปรับแต่งให้เหมาะสม
โครงสร้างพื้นฐานของลูปซ้อนกัน
โครงสร้างพื้นฐานของลูปซ้อนคือรูปแบบที่ลูปหนึ่งหรือมากกว่าถูกฝังอยู่ในอีกลูปหนึ่ง ทุกครั้งที่ลูปด้านนอกถูกดำเนินการหนึ่งครั้ง ลูปด้านในจะถูกดำเนินการตามจำนวนนั้น
ด้านล่างนี้คือตัวอย่างพื้นฐานของลูปซ้อนสองลูป
1for (let i = 0; i < 3; i++) {
2 console.log(`Outer loop iteration: ${i}`);
3
4 for (let j = 0; j < 2; j++) {
5 console.log(` Inner loop iteration: ${j}`);
6 }
7}
8// Output:
9// Outer loop iteration: 0
10// Inner loop iteration: 0
11// Inner loop iteration: 1
12// Outer loop iteration: 1
13// Inner loop iteration: 0
14// Inner loop iteration: 1
15// Outer loop iteration: 2
16// Inner loop iteration: 0
17// Inner loop iteration: 1
ในโค้ดข้างต้น i จะถูกนับในลูปด้านนอก และ j จะถูกนับในลูปด้านใน ทุกครั้งที่ลูปด้านนอกถูกดำเนินการหนึ่งครั้ง ลูปด้านในจะถูกดำเนินการสองครั้ง
ตัวอย่างการใช้งานจริงของลูปซ้อน
ลูปซ้อนมีประโยชน์อย่างยิ่งสำหรับการจัดการ อาร์เรย์หลายมิติ ตัวอย่างเช่น เมื่อประมวลผลอาร์เรย์สองมิติ คุณจำเป็นต้องจัดการทั้งแถว (ลูปด้านนอก) และคอลัมน์ (ลูปด้านใน)
ในตัวอย่างต่อไปนี้ เราจัดการกับอาร์เรย์สองมิติและพิมพ์แต่ละองค์ประกอบ
1const matrix = [
2 [1, 2, 3],
3 [4, 5, 6],
4 [7, 8, 9]
5];
6
7for (let row = 0; row < matrix.length; row++) {
8 for (let col = 0; col < matrix[row].length; col++) {
9 console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10 }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9
ด้วยวิธีนี้ การใช้ลูปซ้อนช่วยให้เข้าถึงแต่ละองค์ประกอบของอาร์เรย์สองมิติได้
หมายเหตุ
มีบางจุดที่ควรคำนึงถึงเมื่อใช้ลูปซ้อน
-
ปัญหาด้านประสิทธิภาพ
เมื่อความลึกของลูปซ้อนเพิ่มขึ้น เวลาในการดำเนินการจะเพิ่มขึ้นอย่างมาก ตัวอย่างเช่น หากลูปด้านนอกถูกดำเนินการ 100 ครั้ง และลูปด้านใน 100 ครั้ง จะมีการดำเนินการทั้งหมด 10,000 ครั้ง ดังนั้น หากมีการวนซ้ำของลูปจำนวนมาก ควรพิจารณาการปรับปรุงลูปให้มีประสิทธิภาพ
-
การประยุกต์ใช้กับอัลกอริทึมที่ซับซ้อน
ลูปซ้อนมีความทรงพลังมาก แต่เมื่อการประมวลผลซับซ้อนขึ้น โค้ดอาจเข้าใจได้ยาก ดังนั้น เพื่อรักษาความสามารถในการอ่านโค้ด ควรจัดระเบียบการประมวลผลด้วยคอมเมนต์และฟังก์ชันที่เหมาะสม
ข้อพิจารณาในการปรับปรุง
เมื่อใช้ลูปซ้อน สามารถพิจารณาการปรับปรุงดังต่อไปนี้
-
การหยุดลูปก่อนเวลา
หากเงื่อนไขที่ระบุตรงภายในลูป คุณสามารถใช้คำสั่ง
breakเพื่อออกจากลูป วิธีนี้สามารถหลีกเลี่ยงลูปที่ไม่จำเป็นและปรับปรุงประสิทธิภาพได้
1for (let i = 0; i < 5; i++) {
2 for (let j = 0; j < 5; j++) {
3 if (i + j > 5) {
4 break;
5 }
6 console.log(`i: ${i}, j: ${j}`);
7 }
8}-
ย้ายการคำนวณออกไปนอกลูป
แทนที่จะคำนวณซ้ำในลูปทุกครั้ง คุณสามารถคำนวณครั้งหนึ่งนอกลูปและใช้ผลลัพธ์นั้นเพื่อทำให้กระบวนการมีประสิทธิภาพมากขึ้น
1let array = [1, 2, 3, 4, 5];
2
3// Inefficient example (calculating every time)
4for (let i = 0; i < array.length; i++) {
5 for (let j = 0; j < array.length; j++) {
6 let sum = array[i] + array[j];
7 console.log(sum);
8 }
9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14 for (let j = 0; j < arrayLength; j++) {
15 let sum = array[i] + array[j];
16 console.log(sum);
17 }
18}สรุป
ลูปซ้อนไม่ซ้อนกันนั้นมีประโยชน์มากในการจัดการโครงสร้างข้อมูลและอัลกอริทึมที่ซับซ้อนใน JavaScript อย่างไรก็ตาม หากใช้ไม่ถูกต้อง อาจทำให้ประสิทธิภาพลดลงและความสามารถในการอ่านโค้ดลดลง เพื่อใช้ลูปซ้อนอย่างมีประสิทธิภาพ จำเป็นต้องมุ่งเน้นการปรับปรุงลูปและการจัดระเบียบโค้ด รวมถึงใช้วิธีการที่เหมาะสมขึ้นอยู่กับสถานการณ์
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย