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


คำชี้แจงการเปลี่ยนจาวาสคริปต์


คำswitchสั่งนี้ใช้เพื่อดำเนินการต่าง ๆ ตามเงื่อนไขที่ต่างกัน


คำชี้แจงการเปลี่ยน JavaScript

ใช้switchคำสั่งเพื่อเลือกบล็อคโค้ดใดบล็อกหนึ่งที่จะดำเนินการ

ไวยากรณ์

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

นี่คือวิธีการทำงาน:

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

ตัวอย่าง

วิธี การgetDay()ส่งกลับวันทำงานเป็นตัวเลขระหว่าง 0 ถึง 6

(อาทิตย์=0, จันทร์=1, อังคาร=2 ..)

ตัวอย่างนี้ใช้หมายเลขวันในการคำนวณชื่อวันทำงาน:

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

ผลลัพธ์ของวันจะเป็น:

Saturday


คำสำคัญ

เมื่อ JavaScript เข้าถึงbreak คีย์เวิร์ด มันจะแยกตัวออกจากบล็อกสวิตช์

การดำเนินการนี้จะหยุดการดำเนินการภายในบล็อกสวิตช์

ไม่จำเป็นต้องทำลายเคสสุดท้ายในบล็อกสวิตช์ บล็อกแตก (สิ้นสุด) อยู่ที่นั่นอยู่แล้ว

หมายเหตุ:หากคุณละเว้นคำสั่งแบ่ง กรณีต่อไปจะถูกดำเนินการแม้ว่าการประเมินจะไม่ตรงกับกรณีและปัญหา


คำหลักเริ่มต้น

คีย์เวิร์ดระบุโค้ด ที่defaultจะรันหากไม่มีตัวพิมพ์ตรงกัน:

ตัวอย่าง

วิธี การgetDay()ส่งกลับวันทำงานเป็นตัวเลขระหว่าง 0 ถึง 6

ถ้าวันนี้ไม่ใช่วันเสาร์ (6) หรือวันอาทิตย์ (0) ให้เขียนข้อความเริ่มต้น:

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}

ผลลัพธ์ของข้อความจะเป็น:

Today is Saturday

กรณีdefaultไม่จำเป็นต้องเป็นกรณีสุดท้ายในบล็อกสวิตช์:

ตัวอย่าง

switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}

หากdefaultไม่ใช่กรณีสุดท้ายในบล็อกสวิตช์ อย่าลืมปิดกรณีเริ่มต้นด้วยการหยุดพัก


บล็อกรหัสทั่วไป

บางครั้งคุณอาจต้องการให้กรณีสวิตช์ต่างๆ ใช้รหัสเดียวกัน

ในกรณีตัวอย่างนี้ 4 และ 5 ใช้บล็อกรหัสเดียวกัน และ 0 และ 6 ใช้บล็อกรหัสอื่นร่วมกัน:

ตัวอย่าง

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}

รายละเอียดการสลับ

หากมีหลายกรณีที่ตรงกับค่าของเคส ระบบจะเลือกเคสแรก

หากไม่พบกรณีที่ตรงกัน โปรแกรมจะยังคงใช้ป้ายกำกับเริ่มต้น

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


การเปรียบเทียบอย่างเข้มงวด

กรณีสวิตช์ใช้ การเปรียบเทียบ ที่เข้มงวด (===)

ค่าต้องเป็นประเภทเดียวกันจึงจะจับคู่ได้

การเปรียบเทียบที่เข้มงวดสามารถเป็นจริงได้ก็ต่อเมื่อตัวถูกดำเนินการเป็นประเภทเดียวกัน

ในตัวอย่างนี้จะไม่มีการจับคู่สำหรับ x:

ตัวอย่าง

let x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}

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

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

สร้างswitchคำสั่งที่จะแจ้งเตือน "สวัสดี" หากfruitsเป็น "กล้วย" และ "ยินดีต้อนรับ" หากfruitsเป็น "แอปเปิ้ล"

(fruits) {
  "Banana":
    alert("Hello")
    break;
  "Apple":
    alert("Welcome")
    break;    
}