History

localizeflow[bot] 3b6a4ec479 chore(i18n): sync translations with latest source changes (chunk 11/20, 100 files)		1 month ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 11/20, 100 files)	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	4 months ago

README.md

Unescape Escape

พื้นฐาน JavaScript: การตัดสินใจ

สเก็ตช์โน้ตโดย Tomomi Imura

journey
    title การผจญภัยในการตัดสินใจด้วย JavaScript ของคุณ
    section พื้นฐาน
      ค่า Boolean: 5: You
      ตัวดำเนินการเปรียบเทียบ: 4: You
      การคิดเชิงตรรกะ: 5: You
    section การตัดสินใจพื้นฐาน
      คำสั่ง If: 4: You
      ตรรกะ If-Else: 5: You
      คำสั่ง Switch: 4: You
    section ตรรกะขั้นสูง
      ตัวดำเนินการทางตรรกะ: 5: You
      เงื่อนไขซับซ้อน: 4: You
      นิพจน์แบบ Ternary: 5: You

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

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

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

แบบทดสอบก่อนบรรยาย

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

🎥 คลิกที่ภาพข้างบนเพื่อดูวิดีโอเกี่ยวกับการตัดสินใจ

คุณสามารถเรียนบทเรียนนี้ได้ที่ Microsoft Learn!

mindmap
  root((การตัดสินใจ))
    Boolean Logic
      จริง/เท็จ
      ผลการเปรียบเทียบ
      นิพจน์ตรรกะ
    Conditional Statements
      if statements
        เงื่อนไขเดียว
        การทำงานของโค้ด
      if-else
        สองทางเลือก
        การกระทำทางเลือก
      switch
        ตัวเลือกหลายตัว
        โครงสร้างที่ชัดเจน
    Operators
      Comparison
        === !== < > <= >=
        ความสัมพันธ์ของค่า
      Logical
        && || !
        รวมเงื่อนไข
    Advanced Patterns
      Ternary
        ? : ไวยากรณ์
        การตัดสินใจแบบบรรทัดเดียว
      Complex Logic
        เงื่อนไขซ้อน
        หลายเกณฑ์

ทบทวนย่อ ๆ เกี่ยวกับบูลีน

ก่อนที่จะสำรวจการตัดสินใจ มาทบทวนค่าบูลีนที่เรียนมาก่อนหน้านี้ ชื่อค่าบูลีนตั้งตามนักคณิตศาสตร์ George Boole ค่าบูลีนแทนสถานะไบนารี – คือ true หรือ false ไม่มีความกำกวม ไม่มีค่าเต็มกลาง

ค่าบูลีนนี้สร้างฐานตรรกะคอมพิวเตอร์ทั้งหมด การตัดสินใจทุกอย่างที่โปรแกรมทำในที่สุดแล้วสรุปเป็นการประเมินบูลีน

การสร้างตัวแปรบูลีนทำได้ง่าย:

let myTrueBool = true;
let myFalseBool = false;

นี่สร้างตัวแปรสองตัวโดยกำหนดค่าเป็นบูลีนอย่างชัดเจน

✅ บูลีนตั้งตามนักคณิตศาสตร์ นักปรัชญา และนักตรรกะชาวอังกฤษ George Boole (1815–1864)

ตัวดำเนินการเปรียบเทียบและบูลีน

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

ตัวดำเนินการเปรียบเทียบช่วยให้การประเมินเหล่านี้ ตัวดำเนินการเหล่านี้เปรียบเทียบค่าและส่งคืนผลลัพธ์บูลีนตามความสัมพันธ์ระหว่างตัวแปรสองฝั่ง

สัญลักษณ์	คำอธิบาย	ตัวอย่าง
`<`	น้อยกว่า: เปรียบเทียบสองค่าและส่งคืนค่า `true` หากค่าด้านซ้ายต่ำกว่าด้านขวา	`5 < 6 // true`
`<=`	น้อยกว่าหรือเท่ากับ: เปรียบเทียบสองค่าและส่งคืนค่า `true` หากค่าด้านซ้ายต่ำกว่าหรือเท่ากับด้านขวา	`5 <= 6 // true`
`>`	มากกว่า: เปรียบเทียบสองค่าและส่งคืนค่า `true` หากค่าด้านซ้ายมากกว่าด้านขวา	`5 > 6 // false`
`>=`	มากกว่าหรือเท่ากับ: เปรียบเทียบสองค่าและส่งคืนค่า `true` หากค่าด้านซ้ายมากกว่าหรือเท่ากับด้านขวา	`5 >= 6 // false`
`===`	เท่ากันอย่างเคร่งครัด: เปรียบเทียบสองค่าและส่งคืนค่า `true` หากค่าทั้งสองด้านเท่ากันและมีชนิดข้อมูลเดียวกัน	`5 === 6 // false`
`!==`	ไม่เท่ากัน: เปรียบเทียบสองค่าและส่งคืนค่าตรงข้ามของค่าที่ `===` จะส่งคืน	`5 !== 6 // true`

✅ ตรวจสอบความเข้าใจโดยการเขียนการเปรียบเทียบบางอย่างในคอนโซลของเบราว์เซอร์ คุณพบค่าที่แปลกใจไหม?

flowchart LR
    A["🔢 ค่าต่างๆ"] --> B["⚖️ การเปรียบเทียบ"]
    B --> C["✅ ผลลัพธ์บูลีน"]
    
    D["5"] --> E["< 6"]
    E --> F["จริง"]
    
    G["10"] --> H["=== '10'"]
    H --> I["เท็จ"]
    
    J["'สวัสดี'"] --> K["!== 'โลก'"]
    K --> L["จริง"]
    
    M["📋 ประเภทตัวดำเนินการ"] --> M1["ความเท่าเทียม: === !=="]
    M --> M2["ความสัมพันธ์: < > <= >="]
    M --> M3["เข้มงวด vs หลวม"]
    
    style A fill:#e3f2fd
    style C fill:#e8f5e8
    style M fill:#fff3e0

🧠 ทดสอบความชำนาญการเปรียบเทียบ: เข้าใจตรรกะบูลีน

ทดสอบความเข้าใจของคุณเกี่ยวกับการเปรียบเทียบ:

ทำไมถึงนิยมใช้ === (เท่ากันอย่างเคร่งครัด) มากกว่า == (เท่ากันแบบหย่อนยาน)?
คุณคาดเดาได้ไหมว่า 5 === '5' จะให้ค่าอะไร? แล้ว 5 == '5' ล่ะ?
ความแตกต่างระหว่าง !== กับ != คืออะไร?

stateDiagram-v2
    [*] --> Comparison: ค่าทั้งสอง
    Comparison --> StrictEqual: === หรือ !==
    Comparison --> Relational: < > <= >=
    
    StrictEqual --> TypeCheck: ตรวจสอบประเภทและค่า
    Relational --> NumberCompare: แปลงเป็นตัวเลข
    
    TypeCheck --> BooleanResult: จริง หรือ เท็จ
    NumberCompare --> BooleanResult
    
    note right of StrictEqual
        วิธีที่แนะนำ
        ไม่มีการแปลงประเภท
    end note
    
    note right of Relational
        มีประโยชน์สำหรับช่วง
        การเปรียบเทียบตัวเลข
    end note

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

คำสั่ง If

คำสั่ง if เปรียบเสมือนการถามคำถามในโค้ดของคุณ "ถ้าเงื่อนไขนี้เป็นจริง ให้ทำสิ่งนี้" เป็นเครื่องมือที่สำคัญที่สุดที่คุณจะใช้ในการตัดสินใจใน JavaScript

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

if (condition) {
  // เงื่อนไขเป็นจริง โค้ดในบล็อกนี้จะทำงาน
}

เงื่อนไขจะอยู่ในวงเล็บ และถ้าเป็น true JavaScript จะรันโค้ดในวงเล็บปีกกานั้น ถ้าเป็น false JavaScript จะข้ามบล็อกนั้นไปเลย

คุณจะใช้ตัวดำเนินการเปรียบเทียบเพื่อสร้างเงื่อนไขเหล่านี้ ดูตัวอย่างใช้งานจริงด้านล่าง:

let currentMoney = 1000;
let laptopPrice = 800;

if (currentMoney >= laptopPrice) {
  // เงื่อนไขเป็นจริง โค้ดในบล็อกนี้จะทำงาน.
  console.log("Getting a new laptop!");
}

เนื่องจาก 1000 >= 800 ประเมินเป็น true โค้ดในบล็อกจะรันแสดงผล "Getting a new laptop!" ในคอนโซล

flowchart TD
    A["🚀 เริ่มโปรแกรม"] --> B{"💰 currentMoney >= laptopPrice?"}
    B -->|true| C["🎉 'กำลังจะได้แล็ปท็อปใหม่!'"]
    B -->|false| D["⏭️ ข้ามบล็อกโค้ด"]
    C --> E["📋 ดำเนินโปรแกรมต่อ"]
    D --> E
    
    F["📊 โครงสร้างคำสั่ง If"] --> F1["if (condition) {"]
    F1 --> F2["  // โค้ดที่จะรันถ้าเป็นจริง"]
    F2 --> F3["}"]
    
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style D fill:#ffebee
    style F fill:#e3f2fd

คำสั่ง If..Else

แต่ถ้าคุณอยากให้โปรแกรมทำอย่างอื่นเมื่อเงื่อนไขเป็นเท็จล่ะ? นี่คือที่มาของ else – เหมือนมีแผนสำรอง

คำสั่ง else ให้คุณบอกว่า "ถ้าเงื่อนไขนี้ไม่เป็นจริง ให้ทำอย่างอื่นแทน"

let currentMoney = 500;
let laptopPrice = 800;

if (currentMoney >= laptopPrice) {
  // เงื่อนไขเป็นจริง โค้ดในบล็อกนี้จะทำงาน
  console.log("Getting a new laptop!");
} else {
  // เงื่อนไขเป็นเท็จ โค้ดในบล็อกนี้จะทำงาน
  console.log("Can't afford a new laptop, yet!");
}

ตอนนี้ เนื่องจาก 500 >= 800 เป็น false JavaScript จะข้ามบล็อกแรกแล้วรันบล็อก else แทน คุณจะเห็นข้อความ "Can't afford a new laptop, yet!" ในคอนโซล

✅ ทดสอบความเข้าใจโค้ดนี้และโค้ดถัดไปด้วยการรันในคอนโซลเบราว์เซอร์ เปลี่ยนค่าตัวแปร currentMoney และ laptopPrice เพื่อดูผลลัพธ์ใน console.log()

🎯 ตรวจสอบตรรกะ If-Else: เส้นทางแยก

ประเมินความเข้าใจตรรกะเชิงเงื่อนไขของคุณ:

จะเกิดอะไรขึ้นถ้า currentMoney เท่ากับ laptopPrice พอดี?
คุณคิดสถานการณ์จริงที่ตรรกะ if-else จะมีประโยชน์ไหม?
คุณจะขยายตรรกะนี้อย่างไรเพื่อจัดการช่วงราคาหลายระดับ?

flowchart TD
    A["🔍 ประเมินเงื่อนไข"] --> B{"เงื่อนไขเป็นจริง?"}
    B -->|ใช่| C["📤 รันบล็อก IF"]
    B -->|ไม่ใช่| D["📥 รันบล็อก ELSE"]
    
    C --> E["✅ เลือกเส้นทางเดียว"]
    D --> E
    
    F["🌐 ตัวอย่างในโลกความเป็นจริง"] --> F1["สถานะการเข้าสู่ระบบของผู้ใช้"]
    F --> F2["การยืนยันอายุ"]
    F --> F3["การตรวจสอบแบบฟอร์ม"]
    F --> F4["การเปลี่ยนสถานะเกม"]
    
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style D fill:#e3f2fd
    style F fill:#f3e5f5

ข้อสังเกตสำคัญ: if-else ทำให้แน่ใจว่าจะมีเส้นทางเดียวที่ถูกเลือก วิธีนี้รับประกันว่าโปรแกรมของคุณจะมีการตอบสนองต่อทุกเงื่อนไขเสมอ!

คำสั่ง Switch

บางครั้งคุณอาจต้องเปรียบเทียบค่าหนึ่งกับตัวเลือกหลายค่า แม้ว่าจะใช้ if..else หลาย ๆ บรรทัดได้ แต่วิธีนั้นจะยุ่งยาก คำสั่ง switch จึงเป็นโครงสร้างที่สะอาดกว่าในการจัดการค่าหลายค่าแยกกัน

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

switch (expression) {
  case x:
    // บล็อกโค้ด
    break;
  case y:
    // บล็อกโค้ด
    break;
  default:
    // บล็อกโค้ด
}

นี่คือโครงสร้าง:

JavaScript ประเมินนิพจน์ครั้งเดียว
ตรวจสอบแต่ละกรณี case เพื่อหาตรงกัน
เมื่อเจอตรงกัน จะรันโค้ดในบล็อกนั้น
break บอกให้ JavaScript หยุดและออกจาก switch
หากไม่มีกรณีใดตรงกัน จะรันบล็อก default (ถ้ามี)

// โปรแกรมที่ใช้คำสั่งสวิตช์สำหรับวันในสัปดาห์
let dayNumber = 2;
let dayName;

switch (dayNumber) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  default:
    dayName = "Unknown day";
    break;
}
console.log(`Today is ${dayName}`);

ในตัวอย่างนี้ JavaScript เห็นว่า dayNumber คือ 2 เจอกรณีที่ตรงกับ case 2 กำหนดค่า dayName เป็น "Tuesday" แล้วหยุดออกจาก switch ผลลัพธ์คือ "Today is Tuesday" แสดงในคอนโซล

flowchart TD
    A["📥 switch(นิพจน์)"] --> B["🔍 ประเมินค่าเพียงครั้งเดียว"]
    B --> C{"ตรงกับเคส 1?"}
    C -->|ใช่| D["📋 ดำเนินการเคส 1"]
    C -->|ไม่ใช่| E{"ตรงกับเคส 2?"}
    E -->|ใช่| F["📋 ดำเนินการเคส 2"]
    E -->|ไม่ใช่| G{"ตรงกับเคส 3?"}
    G -->|ใช่| H["📋 ดำเนินการเคส 3"]
    G -->|ไม่ใช่| I["📋 ดำเนินการดีฟอลต์"]
    
    D --> J["🛑 หยุด"]
    F --> K["🛑 หยุด"]
    H --> L["🛑 หยุด"]
    
    J --> M["✅ ออกจากสวิตช์"]
    K --> M
    L --> M
    I --> M
    
    style A fill:#e3f2fd
    style B fill:#fff3e0
    style M fill:#e8f5e8

✅ ทดสอบความเข้าใจโค้ดนี้และถัดไปด้วยการรันในคอนโซลเบราว์เซอร์ เปลี่ยนค่าตัวแปร a เพื่อดูผลลัพธ์ใน console.log()

🔄 ทดสอบความชำนาญคำสั่ง Switch: ตัวเลือกหลายทาง

ลองทดสอบความเข้าใจ switch:

จะเกิดอะไรขึ้นถ้าคุณลืมใส่คำสั่ง break?
คุณจะเลือกใช้ switch แทน if-else หลาย ๆ ครั้งเมื่อไหร่?
ทำไมถึงต้องมีกรณี default ถึงแม้ว่าคุณคิดว่าครอบคลุมทุกกรณีแล้ว?

pie title "เมื่อใดควรใช้โครงสร้างตัดสินใจแต่ละแบบ"
    "ถ้า-อื่นๆ ง่ายๆ" : 40
    "โครงสร้างถ้า-อื่นๆ แบบซับซ้อน" : 25
    "คำสั่งสวิตช์" : 20
    "ตัวดำเนินการเทอร์นารี" : 15

แนวทางปฏิบัติที่ดีที่สุด: ใช้ switch เมื่อเปรียบเทียบตัวแปรหนึ่งกับค่าหลายค่าเฉพาะ ใช้ if-else สำหรับการตรวจสอบช่วงค่าหรือเงื่อนไขซับซ้อน!

ตัวดำเนินการตรรกะและบูลีน

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

ตัวดำเนินการเหล่านี้ช่วยให้ตรรกะเชิงเงื่อนไขซับซ้อนโดยรวมการประเมิน true/false อย่างง่ายได้

สัญลักษณ์	คำอธิบาย	ตัวอย่าง
`&&`	ตรรกะ AND: เปรียบเทียบสองนิพจน์บูลีน คืนค่า true ก็ต่อเมื่อ ทั้งสองฝั่งเป็น true	`(5 > 3) && (5 < 10) // ทั้งสองฝั่งเป็นจริง คืนค่า true`
`\|\|`	ตรรกะ OR: เปรียบเทียบสองนิพจน์บูลีน คืนค่า true ถ้ามีฝั่งใดฝั่งหนึ่งเป็นจริง	`(5 > 10) \|\| (5 < 10) // ฝั่งหนึ่งเป็นเท็จ อีกฝั่งเป็นจริง คืนค่า true`
`!`	ตรรกะ NOT: คืนค่าตรงข้ามของนิพจน์บูลีน	`!(5 > 10) // 5 ไม่มากกว่า 10 ดังนั้น "!" ทำให้เป็น true`

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

AND (&&) หมายความว่าเงื่อนไขทั้งสองต้องเป็นจริง
OR (||) หมายความว่ามีเงื่อนไขหนึ่งอย่างน้อยต้องเป็นจริง
NOT (!) เปลี่ยนค่า true เป็น false (และในทางกลับกัน)

flowchart LR
    A["🔗 ตัวดำเนินการตรรกะ"] --> B["&& และ"]
    A --> C["|| หรือ"]
    A --> D["! ไม่"]
    
    B --> B1["ทั้งคู่ต้องเป็นจริง"]
    B --> B2["จริง && จริง = จริง"]
    B --> B3["จริง && เท็จ = เท็จ"]
    
    C --> C1["อย่างน้อยหนึ่งเป็นจริง"]
    C --> C2["จริง || เท็จ = จริง"]
    C --> C3["เท็จ || เท็จ = เท็จ"]
    
    D --> D1["กลับค่าของค่า"]
    D --> D2["!จริง = เท็จ"]
    D --> D3["!เท็จ = จริง"]
    
    E["🌍 ตัวอย่างจริง"] --> E1["อายุ >= 18 && มีใบอนุญาต"]
    E --> E2["เป็นวันหยุดสุดสัปดาห์ || เป็นวันหยุดราชการ"]
    E --> E3["!ยังไม่ได้เข้าสู่ระบบ"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

เงื่อนไขและการตัดสินใจกับตัวดำเนินการตรรกะ

มาดูตัวดำเนินการตรรกะนี้ในตัวอย่างที่สมจริงมากขึ้น:

let currentMoney = 600;
let laptopPrice = 800;
let laptopDiscountPrice = laptopPrice - (laptopPrice * 0.2); // ราคาคอมพิวเตอร์โน้ตบุ๊คลด 20 เปอร์เซ็นต์

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  // เงื่อนไขเป็นจริง โค้ดในบล็อกนี้จะทำงาน
  console.log("Getting a new laptop!");
} else {
  // เงื่อนไขเป็นเท็จ โค้ดในบล็อกนี้จะทำงาน
  console.log("Can't afford a new laptop, yet!");
}

ในตัวอย่างนี้: เราคำนวณราคาลด 20% (640) แล้วประเมินว่ากองทุนของเราครอบคลุมราคาทั้งหมด OR ราคาลดหรือไม่ เนื่องจาก 600 ไม่ถึงเกณฑ์ราคาลด 640 เงื่อนไขประเมินเป็น false

🧮 ตรวจสอบตัวดำเนินการตรรกะ: การรวมเงื่อนไข

ทดสอบความเข้าใจตัวดำเนินการตรรกะ:

ในนิพจน์ A && B เกิดอะไรขึ้นถ้า A เป็นเท็จ? B จะถูกประเมินไหม?
คุณนึกสถานการณ์ที่ต้องใช้ตัวดำเนินการทั้งสาม (&&, ||, !) พร้อมกันได้ไหม?
ความแตกต่างระหว่าง !user.isActive กับ user.isActive !== true คืออะไร?

stateDiagram-v2
    [*] --> EvaluateA: A && B
    EvaluateA --> CheckB: A เป็นจริง
    EvaluateA --> ReturnFalse: A เป็นเท็จ
    CheckB --> ReturnTrue: B เป็นจริง
    CheckB --> ReturnFalse: B เป็นเท็จ
    
    [*] --> EvaluateC: A || B
    EvaluateC --> ReturnTrue: A เป็นจริง
    EvaluateC --> CheckD: A เป็นเท็จ
    CheckD --> ReturnTrue: B เป็นจริง
    CheckD --> ReturnFalse: B เป็นเท็จ
    
    note right of EvaluateA
        การประเมินแบบ short-circuit:
        ถ้า A เป็นเท็จ จะไม่ตรวจสอบ B
    end note

เคล็ดลับประสิทธิภาพ: JavaScript ใช้ "การประเมินแบบสั้น" – ใน A && B ถ้า A เป็นเท็จ B จะไม่ถูกประเมิน ใช้จุดนี้ให้เป็นประโยชน์!

ตัวดำเนินการปฏิเสธ (Negation)

บางครั้งง่ายกว่าที่จะคิดว่าเมื่อไรบางอย่างไม่ใช่ความจริง เช่นแทนที่จะถามว่า "ผู้ใช้เข้าสู่ระบบหรือไม่?" คุณอาจจะถามว่า "ผู้ใช้ยังไม่ได้เข้าสู่ระบบหรือเปล่า?" เครื่องหมายตกใจ (!) จะเปลี่ยนตรรกะให้คุณ

if (!condition) {
  // ทำงานถ้าสภาวะเป็นเท็จ
} else {
  // ทำงานถ้าสภาวะเป็นจริง
}

ตัวดำเนินการ ! เปรียบเสมือนพูดว่า "ตรงข้ามกับ..." – ถ้าบางอย่างเป็น true ตัว ! จะทำให้เป็น false และในทางกลับกัน

นิพจน์เทอร์นารี (Ternary Expressions)

สำหรับการกำหนดเงื่อนไขอย่างง่าย JavaScript มี ตัวดำเนินการเทอร์นารี ไวยากรณ์นี้กระทัดรัดช่วยให้เขียนนิพจน์เงื่อนไขในบรรทัดเดียว เหมาะสำหรับการกำหนดค่าหนึ่งในสองค่าโดยขึ้นกับเงื่อนไข

let variable = condition ? returnThisIfTrue : returnThisIfFalse;

อ่านเหมือนคำถามว่า: "เงื่อนไขนี้เป็นจริงไหม? ถ้าใช่ ใช้ค่านี้ ถ้าไม่ ใช้อีกค่านึง"

ด้านล่างเป็นตัวอย่างที่เข้าใจง่ายขึ้น:

let firstNumber = 20;
let secondNumber = 10;
let biggestNumber = firstNumber > secondNumber ? firstNumber : secondNumber;

✅ ใช้เวลาสักครู่อ่านข้อความโค้ดนี้หลาย ๆ รอบ คุณเข้าใจการทำงานของตัวดำเนินการเหล่านี้ไหม?

บรรทัดนี้หมายความว่า: "ค่า firstNumber มากกว่า secondNumber หรือไม่? ถ้าใช่ ให้ใส่ firstNumber ใน biggestNumber ถ้าไม่ ให้ใส่ secondNumber ใน biggestNumber"

ตัวดำเนินการเทอร์นารีเป็นวิธีสั้น ๆ ในการเขียนคำสั่ง if..else แบบดั้งเดิมนี้:

let biggestNumber;
if (firstNumber > secondNumber) {
  biggestNumber = firstNumber;
} else {
  biggestNumber = secondNumber;
}

ทั้งสองวิธีให้ผลลัพธ์เหมือนกัน ตัวดำเนินการเทอร์นารีกระชับกว่า ในขณะที่โครงสร้าง if-else แบบดั้งเดิมอ่านง่ายกว่าในกรณีเงื่อนไขซับซ้อน

flowchart LR
    A["🤔 ตัวดำเนินการแบบเทอร์นารี"] --> B["เงื่อนไข ?"]
    B --> C["ค่าถ้าจริง :"]
    C --> D["ค่าถ้าผิด"]
    
    E["📝 if-else แบบดั้งเดิม"] --> F["if (เงื่อนไข) {"]
    F --> G["  return ค่าถ้าจริง"]
    G --> H["} else {"]
    H --> I["  return ค่าถ้าผิด"]
    I --> J["}"]
    
    K["⚡ เมื่อไหร่ควรใช้"] --> K1["การกำหนดค่าที่ง่าย"]
    K --> K2["เงื่อนไขที่สั้น"]
    K --> K3["การตัดสินใจแบบบรรทัดเดียว"]
    K --> K4["คำสั่ง return"]
    
    style A fill:#e3f2fd
    style E fill:#fff3e0
    style K fill:#e8f5e8

🚀 ความท้าทาย

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

ความท้าทาย GitHub Copilot Agent 🚀

ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้:

คำอธิบาย: สร้างเครื่องคำนวณเกรดอย่างครบถ้วนที่แสดงให้เห็นแนวคิดหลายอย่างของการตัดสินใจในบทเรียนนี้ รวมถึงคำสั่ง if-else, switch, ตัวดำเนินการตรรกะ และนิพจน์เทอร์นารี

คำสั่ง: เขียนโปรแกรม JavaScript ที่รับคะแนนตัวเลขของนักเรียน (0-100) แล้วกำหนดเกรดตัวอักษรตามเกณฑ์เหล่านี้:

A: 90-100
B: 80-89
C: 70-79
D: 60-69
F: ต่ำกว่า 60

ข้อกำหนด:

ใช้คำสั่ง if-else เพื่อกำหนดเกรดตัวอักษร
ใช้ตัวดำเนินการเชิงตรรกะเพื่อตรวจสอบว่านักเรียนผ่าน (grade >= 60) และได้รับเกียรตินิยม (grade >= 90)
ใช้คำสั่ง switch เพื่อนำเสนอความคิดเห็นเฉพาะสำหรับแต่ละเกรดตัวอักษร
ใช้ตัวดำเนินการ ternary เพื่อกำหนดว่านักเรียนมีสิทธิ์เข้าเรียนหลักสูตรถัดไปหรือไม่ (grade >= 70)
รวมการตรวจสอบอินพุตเพื่อให้แน่ใจว่าคะแนนอยู่ระหว่าง 0 ถึง 100

ทดสอบโปรแกรมของคุณด้วยคะแนนต่างๆ รวมถึงกรณีขอบเช่น 59, 60, 89, 90, และอินพุตที่ไม่ถูกต้อง

เรียนรู้เพิ่มเติมเกี่ยวกับ agent mode ได้ที่นี่

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

อ่านเพิ่มเติมเกี่ยวกับตัวดำเนินการมากมายที่มีให้ผู้ใช้ บน MDN

ลองดู operator lookup อันยอดเยี่ยมของ Josh Comeau!

Assignment

Operators

🧠 สรุปชุดเครื่องมือการตัดสินใจของคุณ

graph TD
    A["🎯 การตัดสินใจใน JavaScript"] --> B["🔍 ตรรกะบูลีน"]
    A --> C["📊 คำสั่งเงื่อนไข"]
    A --> D["🔗 ตรรกะตัวดำเนินการ"]
    A --> E["⚡ รูปแบบขั้นสูง"]
    
    B --> B1["ค่าจริง/เท็จ"]
    B --> B2["ตัวดำเนินการเปรียบเทียบ"]
    B --> B3["แนวคิดความเป็นจริง"]
    
    C --> C1["คำสั่ง if"]
    C --> C2["โซ่ if-else"]
    C --> C3["คำสั่ง switch"]
    
    D --> D1["&& (และ)"]
    D --> D2["|| (หรือ)"]
    D --> D3["! (ไม่)"]
    
    E --> E1["ตัวดำเนินการเทอร์นารี"]
    E --> E2["การประเมินแบบสั้นวงจร"]
    E --> E3["เงื่อนไขที่ซับซ้อน"]
    
    F["💡 หลักการสำคัญ"] --> F1["เงื่อนไขที่ชัดเจนและอ่านง่าย"]
    F --> F2["รูปแบบการเปรียบเทียบที่สม่ำเสมอ"]
    F --> F3["ลำดับความสำคัญของตัวดำเนินการที่ถูกต้อง"]
    F --> F4["ลำดับการประเมินที่มีประสิทธิภาพ"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec

🚀 เส้นเวลาการฝึกความชำนาญในการตัดสินใจของ JavaScript ของคุณ

⚡ สิ่งที่คุณทำได้ใน 5 นาทีถัดไป

ฝึกใช้ตัวดำเนินการเปรียบเทียบในคอนโซลเบราว์เซอร์ของคุณ
เขียน if-else ง่ายๆ เพื่อตรวจสอบอายุของคุณ
ลองทำโจทย์: เขียน if-else ใหม่โดยใช้ตัวดำเนินการ ternary
ทดสอบสิ่งที่จะเกิดขึ้นกับค่าที่เป็น "truthy" และ "falsy" ต่างๆ

🎯 สิ่งที่คุณทำสำเร็จได้ในหนึ่งชั่วโมงนี้

ทำแบบทดสอบหลังบทเรียนและทบทวนแนวคิดที่สับสน
สร้างเครื่องคิดเลขเกรดแบบครบวงจรจากความท้าทาย GitHub Copilot
สร้างต้นไม้การตัดสินใจง่ายๆ สำหรับสถานการณ์จริง (เช่น เลือกเสื้อผ้าที่จะใส่)
ฝึกการรวมเงื่อนไขหลายๆ อย่างด้วยตัวดำเนินการเชิงตรรกะ
ทดลองใช้คำสั่ง switch สำหรับกรณีการใช้งานต่างๆ

📅 ความชำนาญตรรกะตลอดสัปดาห์ของคุณ

ทำงานมอบหมายเกี่ยวกับตัวดำเนินการพร้อมตัวอย่างสร้างสรรค์
สร้างแอปทดสอบขนาดเล็กโดยใช้โครงสร้างเงื่อนไขหลากหลาย
สร้างตัวตรวจสอบฟอร์มที่เช็คหลายเงื่อนไขของอินพุต
ฝึกทำแบบฝึกหัด operator lookup ของ Josh Comeau
ปรับปรุงโค้ดที่มีอยู่ให้ใช้โครงสร้างเงื่อนไขที่เหมาะสมขึ้น
ศึกษาการประเมินสั้นวงจรและผลกระทบต่อประสิทธิภาพ

🌟 การเปลี่ยนแปลงตลอดเดือนของคุณ

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

🏆 เช็คอินแชมป์การตัดสินใจขั้นสุดท้าย

ฉลองความชำนาญการคิดเชิงตรรกะของคุณ:

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

journey
    title การพัฒนาการคิดเชิงตรรกะของคุณ
    section วันนี้
      ความสับสนเกี่ยวกับบูลีน: 3: คุณ
      ความเข้าใจใน If-Else: 4: คุณ
      การจดจำโอเปอเรเตอร์: 5: คุณ
    section สัปดาห์นี้
      เงื่อนไขที่ซับซ้อน: 4: คุณ
      ความชำนาญในการใช้ Switch: 5: คุณ
      การผสมผสานทางตรรกะ: 5: คุณ
    section เดือนหน้า
      รูปแบบขั้นสูง: 5: คุณ
      ความตระหนักถึงประสิทธิภาพ: 5: คุณ
      การสอนผู้อื่น: 5: คุณ

🧠 คุณเชี่ยวชาญศิลปะการตัดสินใจในโลกดิจิทัลแล้ว! แอปพลิเคชันเชิงโต้ตอบทุกชนิดขึ้นอยู่กับตรรกะเงื่อนไขเพื่อตอบสนองอย่างชาญฉลาดต่อการกระทำของผู้ใช้และสภาพแวดล้อมที่เปลี่ยนแปลง คุณเข้าใจแล้วว่าจะทำให้โปรแกรมของคุณคิด ประเมิน และเลือกตอบสนองอย่างเหมาะสมได้อย่างไร พื้นฐานตรรกะนี้จะขับเคลื่อนทุกแอปพลิเคชันแบบไดนามิกที่คุณสร้าง! 🎉

คำปฏิเสธความรับผิดชอบ: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาอัตโนมัติ Co-op Translator แม้เราจะพยายามให้มีความถูกต้อง โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความคลาดเคลื่อน เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่น่าเชื่อถือ สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลโดยมนุษย์มืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่อาจเกิดขึ้นจากการใช้การแปลนี้

README.md Unescape Escape