ลูปใน Javascript (For, For in, For of, For each and while)

Dec 10 2022

บทความพื้นฐานเกี่ยวกับลูปใน Javascript แนวคิด ประเภทของวัฏจักร พฤติกรรม และตัวอย่าง

ลูป

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

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

ทำความเข้าใจเกี่ยวกับลูป

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

ในตัวอย่าง ตัวเลขจะถูกพิมพ์บนหน้าจอ ซึ่งหน่วยในการวนซ้ำแต่ละครั้งจะถูกเพิ่มเข้าไป จนเป็นจำนวน 100

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

การประกาศลูป

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

ต่อไปนี้คือวิธีต่างๆ ในการใช้ลูปใน Javascript:

สำหรับ.
สำหรับใน.
สำหรับของ
แต่ละ.
ในขณะที่

สำหรับ

ลูป "for" คือการวนลูปที่ทำซ้ำบล็อกของโค้ดโดยขึ้นอยู่กับ 3 นิพจน์ที่กำหนดไว้ ณ เวลาที่มีการประกาศ

for (expression 1; expression 2; expression 3) {
  // code block to be executed
}

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

for (let i = 1; i <= 5; i++) {
  console.log("the number is " + i);
}

// -- Result --
// the number is 1
// the number is 2
// the number is 3
// the number is 4
// the number is 5

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}
// -- Result --
// a: 1
// b: 2
// c: 3

ลูป "for of" คือการวนซ้ำที่วนซ้ำกับประเภทข้อมูลที่อยู่ในหมวดหมู่ของการวนซ้ำ เช่น ออบเจกต์ อาร์เรย์ หรือเซต เพื่อให้ได้ค่า

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// -- Result --
// 10
// 20
// 30

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

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

array1.forEach(function(element){
  console.log(element);
});
// -- Result --
// "a"
// "b"
// "c"

ลูป “ while” คือการวนซ้ำที่วนซ้ำตราบใดที่เงื่อนไขเป็นจริง

let count = 1;

while (count <= 5) {
  console.log(count);
  count++;
}
// -- Result --
// 1
// 2
// 3
// 4
// 5

คำสั่ง "break" และ "continue" เป็นเครื่องมือที่มีให้โดยภาษาเพื่อหยุดหรือดำเนินการต่อของลูป ประโยคเหล่านี้เติมเต็มบทบาทของการสนับสนุนสำหรับบางกรณีที่เราต้องเข้าไปแทรกแซงในวงจรของการดำเนินการ

หยุดพัก

คำสั่ง "break" จะหยุดการวนซ้ำและสิ้นสุดการดำเนินการ

let fruits = ["apple", "orange", "lemon"];
let fruitToSearch = "orange";

for (let index = 0; index < fruits.length; index++) {
  const fruit = fruits[index];
  if (fruit === fruitToSearch) {
    console.log(`has been found the ${fruit}`);
    break;
  }
  console.log(`The fruit ${fruit} don't match with ${fruitToSearch}`)
}
// -- Result --
// The fruit apple don't match with orange
// has been found the orange

คำสั่ง "ดำเนินการต่อ" จะละเว้นโค้ดที่ตามมาภายในลูป ย้ายไปยังการวนซ้ำถัดไป

let fruits = ["apple", "orange", "lemon"];

for (let index = 0; index < fruits.length; index++) {
  const fruit = fruits[index];
  console.log(`The fruit is ${fruit}`);
  continue;
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
  console.log('this is not execute!!!');
}
// -- Result --
// The fruit is apple
// The fruit is orange
// The fruit is lemon

มีคำแนะนำบางประการให้ใช้รอบประเภทต่างๆ แต่คำแนะนำทั่วไปอาจเป็นดังนี้:

ลูปใน Javascript (For, For in, For of, For each and while)

ลูป

ทำความเข้าใจเกี่ยวกับลูป

การประกาศลูป

สำหรับ

หยุดพัก

วนซ้ำทรัพยากรในจาวาสคริปต์