15 KiB

Raw Blame History Unescape Escape

Asas JavaScript: Membuat Keputusan

Sketchnote oleh Tomomi Imura

Pernahkah anda tertanya-tanya bagaimana aplikasi membuat keputusan yang bijak? Seperti bagaimana sistem navigasi memilih laluan terpantas, atau bagaimana termostat memutuskan bila untuk menghidupkan pemanas? Inilah konsep asas membuat keputusan dalam pengaturcaraan.

Seperti mana Mesin Analitik Charles Babbage direka untuk mengikuti urutan operasi yang berbeza berdasarkan keadaan, program JavaScript moden perlu membuat pilihan berdasarkan pelbagai situasi. Keupayaan untuk bercabang dan membuat keputusan inilah yang mengubah kod statik menjadi aplikasi yang responsif dan pintar.

Dalam pelajaran ini, anda akan belajar cara melaksanakan logik bersyarat dalam program anda. Kita akan meneroka pernyataan bersyarat, operator perbandingan, dan ekspresi logik yang membolehkan kod anda menilai situasi dan bertindak balas dengan sewajarnya.

Kuiz Pra-Kuliah

Kuiz pra-kuliah

Keupayaan untuk membuat keputusan dan mengawal aliran program adalah aspek asas dalam pengaturcaraan. Bahagian ini merangkumi cara mengawal laluan pelaksanaan program JavaScript anda menggunakan nilai Boolean dan logik bersyarat.

🎥 Klik imej di atas untuk video tentang membuat keputusan.

Anda boleh mengikuti pelajaran ini di Microsoft Learn!

Ulang Kaji Ringkas tentang Boolean

Sebelum meneroka membuat keputusan, mari kita ulang kaji nilai Boolean dari pelajaran sebelumnya. Dinamakan sempena ahli matematik George Boole, nilai-nilai ini mewakili keadaan binari – sama ada true atau false. Tiada kekaburan, tiada jalan tengah.

Nilai binari ini membentuk asas semua logik pengiraan. Setiap keputusan yang dibuat oleh program anda akhirnya dikurangkan kepada penilaian Boolean.

Mencipta pembolehubah Boolean adalah mudah:

let myTrueBool = true;
let myFalseBool = false;

Ini mencipta dua pembolehubah dengan nilai Boolean yang jelas.

✅ Boolean dinamakan sempena ahli matematik, ahli falsafah, dan ahli logik Inggeris George Boole (1815–1864).

Operator Perbandingan dan Boolean

Dalam amalan, anda jarang menetapkan nilai Boolean secara manual. Sebaliknya, anda akan menjana nilai tersebut dengan menilai keadaan: "Adakah nombor ini lebih besar daripada yang itu?" atau "Adakah nilai-nilai ini sama?"

Operator perbandingan membolehkan penilaian ini. Mereka membandingkan nilai dan mengembalikan hasil Boolean berdasarkan hubungan antara operand.

Simbol	Penerangan	Contoh
`<`	Kurang daripada: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sebelah kiri kurang daripada nilai di sebelah kanan	`5 < 6 // true`
`<=`	Kurang daripada atau sama dengan: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sebelah kiri kurang daripada atau sama dengan nilai di sebelah kanan	`5 <= 6 // true`
`>`	Lebih besar daripada: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sebelah kiri lebih besar daripada nilai di sebelah kanan	`5 > 6 // false`
`>=`	Lebih besar daripada atau sama dengan: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sebelah kiri lebih besar daripada atau sama dengan nilai di sebelah kanan	`5 >= 6 // false`
`===`	Kesamaan ketat: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sebelah kanan dan kiri adalah sama DAN jenis data adalah sama	`5 === 6 // false`
`!==`	Ketidaksamaan: Membandingkan dua nilai dan mengembalikan nilai Boolean yang bertentangan dengan apa yang akan dikembalikan oleh operator kesamaan ketat	`5 !== 6 // true`

✅ Uji pengetahuan anda dengan menulis beberapa perbandingan dalam konsol pelayar anda. Adakah data yang dikembalikan mengejutkan anda?

Pernyataan If

Pernyataan if adalah seperti bertanya soalan dalam kod anda. "Jika keadaan ini benar, maka lakukan perkara ini." Ia mungkin alat yang paling penting yang akan anda gunakan untuk membuat keputusan dalam JavaScript.

Beginilah cara ia berfungsi:

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

Keadaan diletakkan di dalam kurungan, dan jika ia true, JavaScript akan menjalankan kod di dalam kurungan keriting. Jika ia false, JavaScript hanya akan melangkau keseluruhan blok tersebut.

Anda sering menggunakan operator perbandingan untuk mencipta keadaan ini. Mari kita lihat contoh praktikal:

let currentMoney = 1000;
let laptopPrice = 800;

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

Oleh kerana 1000 >= 800 dinilai sebagai true, kod di dalam blok dilaksanakan, memaparkan "Mendapatkan komputer riba baru!" dalam konsol.

Pernyataan If..Else

Tetapi bagaimana jika anda mahu program anda melakukan sesuatu yang berbeza apabila keadaan adalah palsu? Di sinilah else masuk – ia seperti mempunyai rancangan sandaran.

Pernyataan else memberi anda cara untuk mengatakan "jika keadaan ini tidak benar, lakukan perkara lain ini sebagai gantinya."

let currentMoney = 500;
let laptopPrice = 800;

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!");
}

Sekarang, oleh kerana 500 >= 800 adalah false, JavaScript melangkau blok pertama dan menjalankan blok else sebagai gantinya. Anda akan melihat "Belum mampu membeli komputer riba baru!" dalam konsol.

✅ Uji pemahaman anda tentang kod ini dan kod berikut dengan menjalankannya dalam konsol pelayar. Tukar nilai pembolehubah currentMoney dan laptopPrice untuk menukar console.log() yang dikembalikan.

Pernyataan Switch

Kadang-kadang anda perlu membandingkan satu nilai dengan pelbagai pilihan. Walaupun anda boleh menggabungkan beberapa pernyataan if..else, pendekatan ini menjadi tidak praktikal. Pernyataan switch menyediakan struktur yang lebih bersih untuk mengendalikan pelbagai nilai diskret.

Konsep ini menyerupai sistem pensuisan mekanikal yang digunakan dalam pertukaran telefon awal – satu nilai input menentukan laluan pelaksanaan tertentu.

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

Beginilah cara ia disusun:

JavaScript menilai ekspresi sekali
Ia melihat setiap case untuk mencari padanan
Apabila ia menemui padanan, ia menjalankan blok kod tersebut
break memberitahu JavaScript untuk berhenti dan keluar dari switch
Jika tiada kes yang sepadan, ia menjalankan blok default (jika anda ada)

// Program using switch statement for day of week
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}`);

Dalam contoh ini, JavaScript melihat bahawa dayNumber adalah 2, mencari case 2 yang sepadan, menetapkan dayName kepada "Tuesday", dan kemudian keluar dari switch. Hasilnya? "Hari ini adalah Selasa" dipaparkan dalam konsol.

✅ Uji pemahaman anda tentang kod ini dan kod berikut dengan menjalankannya dalam konsol pelayar. Tukar nilai pembolehubah a untuk menukar console.log() yang dikembalikan.

Operator Logik dan Boolean

Keputusan yang kompleks sering memerlukan penilaian pelbagai keadaan secara serentak. Seperti mana algebra Boolean membolehkan ahli matematik menggabungkan ekspresi logik, pengaturcaraan menyediakan operator logik untuk menghubungkan pelbagai keadaan Boolean.

Operator ini membolehkan logik bersyarat yang canggih dengan menggabungkan penilaian benar/palsu yang mudah.

Simbol	Penerangan	Contoh
`&&`	Logik AND: Membandingkan dua ekspresi Boolean. Mengembalikan true hanya jika kedua-dua belah adalah benar	`(5 > 3) && (5 < 10) // Kedua-dua belah adalah benar. Mengembalikan true`
`\|\|`	Logik OR: Membandingkan dua ekspresi Boolean. Mengembalikan true jika sekurang-kurangnya satu belah adalah benar	`(5 > 10) \|\| (5 < 10) // Satu belah adalah palsu, yang lain adalah benar. Mengembalikan true`
`!`	Logik NOT: Mengembalikan nilai yang bertentangan dengan ekspresi Boolean	`!(5 > 10) // 5 tidak lebih besar daripada 10, jadi "!" menjadikannya benar`

Operator ini membolehkan anda menggabungkan keadaan dengan cara yang berguna:

AND (&&) bermaksud kedua-dua keadaan mesti benar
OR (||) bermaksud sekurang-kurangnya satu keadaan mesti benar
NOT (!) membalikkan benar kepada palsu (dan sebaliknya)

Keadaan dan Keputusan dengan Operator Logik

Mari kita lihat operator logik ini dalam tindakan dengan contoh yang lebih realistik:

let currentMoney = 600;
let laptopPrice = 800;
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 false. Code in this block will run.
  console.log("Can't afford a new laptop, yet!");
}

Dalam contoh ini: kita mengira harga diskaun 20% (640), kemudian menilai sama ada dana yang tersedia kita mencukupi untuk harga penuh ATAU harga diskaun. Oleh kerana 600 memenuhi ambang harga diskaun 640, keadaan dinilai sebagai benar.

Operator Negasi

Kadang-kadang lebih mudah untuk memikirkan apabila sesuatu TIDAK benar. Seperti bukannya bertanya "Adakah pengguna log masuk?", anda mungkin mahu bertanya "Adakah pengguna TIDAK log masuk?" Tanda seru (!) membalikkan logik untuk anda.

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

Operator ! adalah seperti mengatakan "kebalikan daripada..." – jika sesuatu adalah true, ! menjadikannya false, dan sebaliknya.

Ekspresi Ternari

Untuk tugasan bersyarat yang mudah, JavaScript menyediakan operator ternari. Sintaks ringkas ini membolehkan anda menulis ekspresi bersyarat dalam satu baris, berguna apabila anda perlu menetapkan salah satu daripada dua nilai berdasarkan keadaan.

let variable = condition ? returnThisIfTrue : returnThisIfFalse;

Ia dibaca seperti soalan: "Adakah keadaan ini benar? Jika ya, gunakan nilai ini. Jika tidak, gunakan nilai itu."

Di bawah adalah contoh yang lebih nyata:

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

✅ Luangkan masa sebentar untuk membaca kod ini beberapa kali. Adakah anda memahami bagaimana operator ini berfungsi?

Inilah yang dikatakan oleh baris ini: "Adakah firstNumber lebih besar daripada secondNumber? Jika ya, letakkan firstNumber dalam biggestNumber. Jika tidak, letakkan secondNumber dalam biggestNumber."

Operator ternari hanyalah cara yang lebih pendek untuk menulis pernyataan if..else tradisional ini:

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

Kedua-dua pendekatan menghasilkan hasil yang sama. Operator ternari menawarkan ringkasan, manakala struktur if-else tradisional mungkin lebih mudah dibaca untuk keadaan yang kompleks.

🚀 Cabaran

Cipta program yang ditulis terlebih dahulu dengan operator logik, dan kemudian tulis semula menggunakan ekspresi ternari. Apakah sintaks pilihan anda?

Cabaran Ejen GitHub Copilot 🚀

Gunakan mod Ejen untuk melengkapkan cabaran berikut:

Penerangan: Cipta kalkulator gred yang komprehensif yang menunjukkan pelbagai konsep membuat keputusan dari pelajaran ini, termasuk pernyataan if-else, pernyataan switch, operator logik, dan ekspresi ternari.

Arahan: Tulis program JavaScript yang mengambil skor numerik pelajar (0-100) dan menentukan gred huruf mereka menggunakan kriteria berikut:

A: 90-100
B: 80-89
C: 70-79
D: 60-69
F: Di bawah 60

Keperluan:

Gunakan pernyataan if-else untuk menentukan gred huruf
Gunakan operator logik untuk memeriksa sama ada pelajar lulus (gred >= 60) DAN mempunyai penghormatan (gred >= 90)
Gunakan pernyataan switch untuk memberikan maklum balas khusus untuk setiap gred huruf
Gunakan operator ternari untuk menentukan sama ada pelajar layak untuk kursus seterusnya (gred >= 70)
Sertakan pengesahan input untuk memastikan skor adalah antara 0 dan 100

Uji program anda dengan pelbagai skor termasuk kes tepi seperti 59, 60, 89, 90, dan input tidak sah.

Ketahui lebih lanjut tentang mod ejen di sini.

Kuiz Pasca-Kuliah

Kuiz pasca-kuliah

Ulasan & Kajian Kendiri

Baca lebih lanjut tentang banyak operator yang tersedia untuk pengguna di MDN.

Pergi melalui panduan hebat Josh Comeau tentang operator lookup!

Tugasan

Operator

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.

15 KiB Raw Blame History Unescape Escape