Frontend Academy · Pelajaran

Aliran Kawalan: if else switch for while

Buat percabangan dengan if/else dan switch, lakukan gelung dengan for dan while serta gunakan break dan continue untuk mengawal lelaran.

Pelajaran 4 daripada 413 langkah

Aliran Kawalan: if else switch for while ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah aliran kawalan?

Aliran kawalan menentukan kod yang berjalan dan bilangan kali kod itu berjalan. JavaScript menyediakan syarat (if/else, switch) dan gelung (for, while, do/while) untuk mengarahkan laluan pelaksanaan berdasarkan syarat dan data.

if / else if / else

Syarat bersyarat yang paling asas. Keadaan dalam kurungan dinilai sebagai benar atau palsu. Beberapa keadaan boleh dirangkaikan dengan else if. else yang terakhir menjadi pilihan sandaran untuk semua kes lain.

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

Operator Ternari

Operator ternari ialah bentuk if/else sebaris yang ringkas: condition ? trueValue : falseValue. Gunakannya untuk penetapan mudah dan ungkapan JSX. Elakkan ternari bersarang kerana kodnya cepat menjadi sukar dibaca.

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

Pernyataan switch

switch membandingkan satu nilai dengan beberapa kes menggunakan kesamaan ketat. Gunakan break selepas setiap kes untuk mengelakkan pelaksanaan berterusan ke kes seterusnya. default mengendalikan nilai yang tidak sepadan.

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

Gelung for

Gelung for gaya C yang klasik: penginisialisasi; keadaan; penambahan. Paling sesuai untuk mengulang bilangan kali yang diketahui atau mengulang tatasusunan berdasarkan indeks.

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

Gelung for...of

for...of mengulang nilai mana-mana objek yang boleh diulangi, seperti tatasusunan, rentetan, pemetaan dan set. Ia lebih kemas daripada gelung for berasaskan indeks apabila anda tidak memerlukan indeks.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

Gelung for...in

for...in mengulang kunci sifat sesuatu objek yang boleh disenaraikan. Jangan gunakannya pada tatasusunan — gunakan for...of atau kaedah tatasusunan.

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Gelung while

Gelung while dilaksanakan selagi keadaannya dinilai sebagai benar. Gunakannya apabila bilangan lelaran belum diketahui — contohnya, membaca input sehingga pengguna memasukkan nilai yang sah.

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

Gelung do...while

do...while melaksanakan badan gelung sekurang-kurangnya sekali sebelum menyemak keadaan. Ia berguna apabila badan gelung perlu dilaksanakan sebelum anda boleh menilai keadaan keluar.

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

break dan continue

break keluar serta-merta daripada gelung semasa. continue melangkau baki lelaran semasa dan beralih ke lelaran seterusnya. Kedua-duanya berfungsi dalam gelung for, while dan do/while.

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

Penilaian Litar Pintas

&& mengembalikan nilai pertama yang palsu atau nilai terakhir. || mengembalikan nilai pertama yang benar atau nilai terakhir. ?? (penggabungan nullish) hanya mengembalikan sebelah kanan apabila sebelah kiri ialah null atau undefined.

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

Semakan Pantas

Gelung manakah yang dijamin melaksanakan badannya sekurang-kurangnya sekali?

Jawab dalam pelajaran interaktif

Rumusan: Aliran Kawalan JavaScript

if/else untuk percabangan. switch untuk beberapa nilai diskret. Gelung for untuk lelaran yang bilangannya diketahui. for...of untuk objek boleh diulangi. while untuk bilangan lelaran yang tidak diketahui. do...while untuk sekurang-kurangnya satu lelaran. break keluar daripada gelung. continue melangkau lelaran. Operator litar pintas untuk syarat yang ringkas.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Aliran Kawalan: if else switch for while” percuma?

Ya — teks penuh “Aliran Kawalan: if else switch for while” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Aliran Kawalan: if else switch for while”?

Buat percabangan dengan if/else dan switch, lakukan gelung dengan for dan while serta gunakan break dan continue untuk mengawal lelaran. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Aliran Kawalan: if else switch for while” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Pemboleh Ubah: let const var dan Skop
Jenis Data: string number boolean null undefined
Fungsi: Pengisytiharan, Ungkapan dan Fungsi Anak Panah
Aliran Kawalan: if else switch for while

← Kembali ke Frontend Academy