คำสั่ง for ของ JavaScript

การระบุและใช้งาน

การใช้คำสั่ง for สร้างวนรอบ และจะทำงานวนรอบที่เงื่อนไขเป็นความจริง

วนรอบจะดำเนินการต่อไปทันทีที่เงื่อนไขเป็นความจริง และจะหยุดลงเมื่อเงื่อนไขกลับเป็นความเท็จ

JavaScript สนับสนุนชนิดวนรอบที่แตกต่างกัน:

  • for - วนรอบโค้ดหลายครั้ง
  • for/in - วนรอบคุณภาพของวัตถุ
  • for/of - วนลูปครicle ผ่านค่าของวัตถุที่สามารถวนลูปได้
  • while - วนลูปครicle บล็อคครicle ที่เงื่อนไขที่กำหนดเป็น true
  • do/while - วนลูปครicle ครั้งหนึ่งของบล็อคครicle แล้ววนลูปอีกครั้งเมื่อเงื่อนไขที่กำหนดเป็น true

คำแนะนำ:ใช้คำสั่ง break ในลูปเพื่อออกจากลูป ใช้คำสั่ง continue ในลูปเพื่อข้ามค่าในลูป

ตัวอย่าง

วนลูปโดยเฉพาะครicle 5 ครั้ง:

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

ทดลองด้วยตัวเอง

ที่ด้านล่างของหน้ามีตัวอย่าง TIY มากกว่า

รูปแบบ

for (statement 1; statement 2; statement 3) {
  บล็อครูปครicle ที่ต้องทำงาน
}

ค่าตัวแปร

ตัวแปร คำอธิบาย
statement1

ตัวเลือกได้. ปฏิบัติตัวแปรก่อนที่จะเริ่มลูป (บล็อคครicle). ธรรมดาใช้เพื่อตั้งค่าตัวแปรนับ. ถ้าต้องการตั้งค่าหลายค่า ใช้ขีด逗号แยกค่าทุกค่า

หมายเหตุ:อาจละเลยอาเรย์นี้. แต่อย่าละเลยประกายบวก ";"
statement2

ตัวเลือกได้. กำหนดเงื่อนไขที่ทำให้ลูปทำงาน (บล็อคครicle). ธรรมดาใช้เพื่อประเมินเงื่อนไขของตัวแปรนับ. ถ้ากลับค่าเป็น true ลูปจะเริ่มต้นใหม่ ถ้าเป็น false ลูปจะจบลง

หมายเหตุ:อาจละเลยอาเรย์นี้. แต่อย่าละเลยประกายบวก ";". นอกจากนี้ ถ้าละเลยอาเรย์นี้ ต้องมี break ในลูป. ไม่เช่นนั้น ลูปจะไม่จบลง ซึ่งอาจทำให้เวิร์ชั่นของคุณหักตัวเอง
statement3

ตัวเลือกได้. ปฏิบัติตัวแปรหลังจากที่ปฏิบัติลูป (บล็อคครicle) ธรรมดาใช้เพื่อเพิ่มหรือลดตัวแปรนับ

หมายเหตุ:อาจละเลยอาเรย์นี้ (เช่นเพิ่ม/ลดค่าภายในลูป)

รายละเอียดเทคโนโลยี

เวอร์ชั่น JavaScript: ECMAScript 1

ตัวอย่างเพิ่มเติม

ตัวอย่าง

ลูปเดินทางของตัวแปรดังกล่าว รวบรวมชื่อรถจากอารยะตัวแปร cars

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

ทดลองด้วยตัวเอง

ตัวอย่างชี้แจง:

  • ในตอนแรก เราตั้งค่าตัวแปรก่อนที่จะเริ่มลูป (var i = 0;)
  • จากนั้น เรากำหนดเงื่อนไขของการวนลูป และเมื่อตัวแปรต่ำกว่าความยาวของตัวแปร (คือ 4) ลูปจะต่อเนื่อง
  • ตัวแปรเพิ่มขึ้น 1 ในแต่ละการวนลูป (i++)
  • บัดที่ตัวแปรไม่มีค่าต่ำกว่า 4 (ความยาวของตัวแปร) สภาพเป็นค่าเท็จ ลูปจบลง

ตัวอย่าง

ตั้งค่าหลายค่าในอาเรย์แรก

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
for (i = 0, len = cars.length, text = ""; i < len; i++) { 
  text += cars[i] + "<br>";
}

ทดลองด้วยตัวเอง

ตัวอย่าง

ละเลยอารยะที่แรก (ตั้งค่าค่าก่อนที่จะเริ่มลูป)

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

ทดลองด้วยตัวเอง

ตัวอย่าง

ใช้คำสั่ง continue ในบล็อคลูปครicle แต่ข้ามค่า "3" นี้

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  text += "The number is " + i + "<br>";
}

ทดลองด้วยตัวเอง

ตัวอย่าง

ใช้คำสั่ง break สำหรับวงลูก - วนรอบบางส่วนของโค้ด แต่ออกจากวงลูกเมื่อตัวแปร i มีค่า "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  text += "The number is " + i + "<br>";
}

ทดลองด้วยตัวเอง

ตัวอย่าง

ละเลยพารามิเตอร์ที่สอง. ในตัวอย่างนี้ เรายังใช้คำสั่ง break ในตอนที่ i มีค่า "3" และออกจากวงลูก (ถ้าละเลยพารามิเตอร์ที่สอง จะต้องมี break ในต้นวงลูก. ไม่เช่นนั้นวงลูกจะไม่จบ และเบราเซอร์ของคุณจะดับ):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
  if (i == 3) {
    break;
  }
  text += cars[i] + "<br>";
}

ทดลองด้วยตัวเอง

ตัวอย่าง

วนรอบด้วยลำดับของอิเลิญที่ลดลง (ลดค่าตามทิศทางลบ):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";
}

ทดลองด้วยตัวเอง

ตัวอย่าง

ละเลยพารามิเตอร์สุดท้าย และเพิ่มค่าในวงลูก:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
for (; i < len;) { 
  text += cars[i] + "<br>";
  i++;
}

ทดลองด้วยตัวเอง

ตัวอย่าง

วนรอบ NodeList ว่าด้วยตัวเลขของโหนดและเปลี่ยนสีหลังของทั้งหมด <p> ในลิสต์:

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";
}

ทดลองด้วยตัวเอง

ตัวอย่าง

ตัวอย่างสำหรับวงลูกซ้อน (วงลูกภายในวงลูก):

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  for (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";
  }
}

ทดลองด้วยตัวเอง

การสนับสนุนโดยเบราเซอร์

ประโยค Chrome IE Firefox Safari Opera
for สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

หน้าเกี่ยวข้อง

JavaScript ตัวเรียน:JavaScript รูปแบบการวน for

คู่มือสำหรับ JavaScript:JavaScript คำสั่ง for ... in

คู่มือสำหรับ JavaScript:JavaScript คำสั่ง break

คู่มือสำหรับ JavaScript:JavaScript คำสั่ง continue

คู่มือสำหรับ JavaScript:JavaScript คำสั่ง while