16 KiB

Raw Permalink Blame History Unescape Escape

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

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

แบบทดสอบก่อนเรียน

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

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

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

ทบทวนเกี่ยวกับ Boolean แบบย่อ

Boolean มีค่าได้เพียงสองค่าเท่านั้น: true หรือ false Boolean ช่วยในการตัดสินใจว่าโค้ดบรรทัดใดควรทำงานเมื่อเงื่อนไขบางอย่างเป็นจริง

ตั้งค่า Boolean ของคุณให้เป็น true หรือ false ได้ดังนี้:

let myTrueBool = true
let myFalseBool = false

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

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

ตัวดำเนินการใช้เพื่อประเมินเงื่อนไขโดยการเปรียบเทียบ ซึ่งจะสร้างค่าประเภท Boolean ด้านล่างคือตัวดำเนินการที่ใช้บ่อย

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

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

คำสั่ง If

คำสั่ง if จะทำงานโค้ดในบล็อกของมันหากเงื่อนไขเป็นจริง

if (condition) {
  //Condition is true. Code in this block will run.
}

ตัวดำเนินการเชิงตรรกะมักถูกใช้เพื่อสร้างเงื่อนไข

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
}

คำสั่ง If..Else

คำสั่ง else จะทำงานโค้ดในบล็อกของมันเมื่อเงื่อนไขเป็นเท็จ คำสั่งนี้เป็นตัวเลือกเสริมสำหรับคำสั่ง if

let currentMoney;
let laptopPrice;

if (currentMoney >= laptopPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

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

คำสั่ง Switch

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

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

// program using switch statement
let a = 2;

switch (a) {
  case 1:
    a = "one";
    break;
  case 2:
    a = "two";
    break;
  default:
    a = "not found";
    break;
}
console.log(`The value is ${a}`);

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

ตัวดำเนินการเชิงตรรกะและ Boolean

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

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

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

ตัวดำเนินการเชิงตรรกะสามารถใช้เพื่อสร้างเงื่อนไขในคำสั่ง if..else

let currentMoney;
let laptopPrice;
let laptopDiscountPrice = laptopPrice - laptopPrice * 0.2; //Laptop price at 20 percent off

if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice) {
  //Condition is true. Code in this block will run.
  console.log("Getting a new laptop!");
} else {
  //Condition is true. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

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

คุณได้เห็นแล้วว่าคุณสามารถใช้คำสั่ง if...else เพื่อสร้างตรรกะเงื่อนไขได้อย่างไร สิ่งใดก็ตามที่ใส่ใน if จะต้องประเมินค่าเป็น true/false โดยการใช้ตัวดำเนินการ ! คุณสามารถ ปฏิเสธ นิพจน์ได้ มันจะมีลักษณะดังนี้:

if (!condition) {
  // runs if condition is false
} else {
  // runs if condition is true
}

นิพจน์แบบ Ternary

if...else ไม่ใช่วิธีเดียวในการแสดงตรรกะการตัดสินใจ คุณยังสามารถใช้สิ่งที่เรียกว่าตัวดำเนินการ ternary ได้ ไวยากรณ์ของมันมีลักษณะดังนี้:

let variable = condition ? <return this if true> : <return this if false>

ด้านล่างคือตัวอย่างที่จับต้องได้มากขึ้น:

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

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

โค้ดด้านบนระบุว่า

หาก firstNumber มีค่ามากกว่า secondNumber
ให้กำหนดค่า firstNumber ให้กับ biggestNumber
มิฉะนั้นให้กำหนดค่า secondNumber

นิพจน์ ternary เป็นเพียงวิธีการเขียนโค้ดแบบย่อดังนี้:

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

🚀 ความท้าทาย

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

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตนเอง

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

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

งานที่ได้รับมอบหมาย

Operators

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

16 KiB Raw Permalink Blame History Unescape Escape