JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


JavaScript สำหรับลูป


ลูปสามารถรันบล็อกของโค้ดได้หลายครั้ง


JavaScript ลูป

ลูปมีประโยชน์ หากคุณต้องการเรียกใช้โค้ดเดิมซ้ำแล้วซ้ำเล่า โดยมีค่าต่างกันในแต่ละครั้ง

มักจะเป็นกรณีนี้เมื่อทำงานกับอาร์เรย์:

แทนที่จะเขียนว่า

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

คุณสามารถเขียน:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

ลูปประเภทต่างๆ

JavaScript รองรับลูปประเภทต่างๆ:

  • for - วนซ้ำผ่านบล็อกของรหัสหลายครั้ง
  • for/in - วนซ้ำคุณสมบัติของวัตถุ
  • for/of - วนซ้ำค่าของวัตถุที่วนซ้ำได้
  • while - วนซ้ำผ่านบล็อกของรหัสในขณะที่เงื่อนไขที่ระบุเป็นจริง
  • do/while - ยังวนซ้ำผ่านบล็อกของรหัสในขณะที่เงื่อนไขที่ระบุเป็นจริง

The For Loop

ลู ปforมีไวยากรณ์ต่อไปนี้:

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

คำสั่งที่ 1ถูกดำเนินการ (ครั้งเดียว) ก่อนการดำเนินการของบล็อกโค้ด

คำสั่งที่ 2กำหนดเงื่อนไขสำหรับการดำเนินการบล็อคโค้ด

คำสั่ง 3ถูกดำเนินการ (ทุกครั้ง) หลังจากที่บล็อกโค้ดถูกดำเนินการแล้ว

ตัวอย่าง

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

จากตัวอย่างข้างต้น คุณสามารถอ่าน:

คำสั่งที่ 1 ตั้งค่าตัวแปรก่อนเริ่มการวนซ้ำ (ให้ i = 0)

คำสั่ง 2 กำหนดเงื่อนไขสำหรับการวนซ้ำ (ฉันต้องน้อยกว่า 5)

คำสั่งที่ 3 เพิ่มค่า (i++) ทุกครั้งที่มีการดำเนินการบล็อกโค้ดในลูป



ใบแจ้งยอด 1

โดยปกติ คุณจะใช้คำสั่ง 1 เพื่อเริ่มต้นตัวแปรที่ใช้ในลูป (ให้ i = 0)

นี่ไม่ใช่กรณีเสมอไป JavaScript ไม่สนใจ งบ 1 เป็นทางเลือก

คุณสามารถเริ่มต้นค่าต่างๆ ในคำสั่ง 1 (คั่นด้วยเครื่องหมายจุลภาค):

ตัวอย่าง

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

และคุณสามารถละเว้นคำสั่ง 1 ได้ (เช่น เมื่อค่าของคุณถูกตั้งค่าก่อนเริ่มการวนซ้ำ):

ตัวอย่าง

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

คำชี้แจง 2

มักใช้คำสั่ง 2 เพื่อประเมินเงื่อนไขของตัวแปรเริ่มต้น

นี่ไม่ใช่กรณีเสมอไป JavaScript ไม่สนใจ คำสั่งที่ 2 ก็เป็นทางเลือกเช่นกัน

หากคำสั่งที่ 2 คืนค่า จริง การวนซ้ำจะเริ่มอีกครั้ง หากคืนค่า เท็จ การวนซ้ำจะสิ้นสุด

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


คำชี้แจง 3

บ่อยครั้งที่คำสั่ง 3 เพิ่มค่าของตัวแปรเริ่มต้น

ซึ่งไม่เป็นเช่นนั้นเสมอไป JavaScript ไม่สนใจ และคำสั่ง 3 เป็นทางเลือก

ประโยคที่ 3 สามารถทำอะไรก็ได้ เช่น การเพิ่มขึ้นเชิงลบ (i--), การเพิ่มขึ้นในเชิงบวก (i = i + 15) หรืออย่างอื่น

นอกจากนี้ยังสามารถละเว้นคำสั่ง 3 (เช่นเมื่อคุณเพิ่มค่าของคุณภายในลูป):

ตัวอย่าง

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

ขอบเขตวง

ใช้varในวง:

ตัวอย่าง

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

ใช้letในวง:

ตัวอย่าง

let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5

ในตัวอย่างแรก การใช้varตัวแปรที่ประกาศในลูปจะประกาศตัวแปรนอกลูปอีกครั้ง

ในตัวอย่างที่สอง การใช้letตัวแปรที่ประกาศในลูปจะไม่ประกาศตัวแปรนอกลูปซ้ำ

เมื่อletใช้เพื่อประกาศตัวแปร i ในลูป ตัวแปร i จะมองเห็นได้ภายในลูปเท่านั้น


สำหรับ/ของและสำหรับ/ในลูป

for/inวนซ้ำและวนfor/ofซ้ำจะอธิบายในบทต่อไป


ในขณะที่ลูป

whileวนซ้ำและอธิบายdo/whileในบทต่อไป


ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

สร้างลูปที่รันจาก 0 ถึง 9

let i;
 ( = ;  < ; ) {
  console.log(i);
}