Langkau ke kandungan
WANCODE
EN

Loop: Ulang Tanpa Salin-Tampal

16 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

  • Tulis loop for, for...of dan while serta pilih yang sesuai
  • Guna variable pengumpul (accumulator) untuk membina jumlah atau array baharu
  • Kawal loop dengan break dan continue, dan kenal pasti infinite loop

Idea utama

Loop menjalankan blok kod yang sama berulang kali selagi satu syarat masih benar. Tugas anda ialah memastikan syarat itu akhirnya menjadi palsu.

map dan filter boleh buat banyak kerja dengan senarai, tetapi kadangkala anda perlukan kawalan penuh: menjumlahkan sesuatu, berhenti awal, atau mengulang sehingga sesuatu berlaku. Itulah tujuan loop.

Loop for klasik

JavaScript
//   start      keep going while   step after each round
for (let i = 0; i < 3;             i++) {
  console.log("i is " + i);
}
// i is 0
// i is 1
// i is 2
  1. Mula: let i = 0 dijalankan sekali, sebelum perkara lain.
  2. Syarat: sebelum setiap pusingan, i < 3 disemak. Jika palsu, loop tamat.
  3. Langkah: selepas setiap pusingan, i++ menambah 1 kepada i.

for...of — cara mudah melalui array

Dengan index

JavaScript
for (let i = 0; i < prices.length; i++) {
  console.log(prices[i]);
}

Dengan for...of

JavaScript
for (const price of prices) {
  console.log(price);
}

Kedua-duanya mencetak setiap harga. Guna for...of jika anda cuma perlukan setiap item; guna index jika anda juga perlukan kedudukannya.

Corak loop paling biasa ialah accumulator (pengumpul): mulakan dengan nilai kosong sebelum loop, kemas kini di dalam, dan guna selepas.

JavaScript
const orders = [
  { item: "Nasi Lemak", qty: 2, price: 6.5 },
  { item: "Teh Tarik", qty: 3, price: 2.5 },
];

let bill = 0;                       // 1. before
for (const order of orders) {
  bill += order.qty * order.price;  // 2. inside
}
console.log("RM " + bill);          // 3. after → RM 20.5

break, continue dan while

JavaScript
for (const order of orders) {
  if (order.qty === 0) continue; // skip this round, go to the next one
  if (order.price > 100) break;  // stop the whole loop right now
  console.log(order.item);
}

// while: repeat as long as the condition is true — useful when
// you don't know in advance how many rounds you need
let savings = 100;
let months = 0;
while (savings < 1000) {
  savings += 150;
  months++;
}
console.log(months); // 6

Infinite loop

Jika syarat tidak pernah menjadi palsu, loop tidak akan berhenti dan halaman akan hang. Punca biasa: terlupa i++, mengemas kini variable yang salah, atau nilai yang tidak mungkin sampai ke sasaran (menggandakan 0 tetap 0 selama-lamanya). Tanya diri anda: apa yang berubah setiap pusingan, dan adakah ia bergerak ke arah jalan keluar?

Jaring keselamatan WANCode

Dalam pratonton ini, mana-mana loop yang berjalan lebih daripada 1.5 saat akan dihentikan secara automatik dan Konsol akan memberitahu baris mana puncanya. Tab pelayar sebenar tiada jaring keselamatan begini — ia akan hang sehingga anda menutupnya.

Lengkapkan dua function dalam script.js:

1. total(numbers) menjumlahkan setiap nombor dalam array dan memulangkan hasilnya. total([]) ialah 0.

2. countdown(n) memulangkan array baharu yang mengira menurun dari n hingga 1: countdown(3) ialah [3, 2, 1] dan countdown(0) ialah [].

Semakan

  • total menjumlahkan mana-mana array
  • countdown membina [n … 1]

Uji kefahaman

Q1

Berapa kali for (let i = 0; i < 5; i++) { … } menjalankan isinya?

Q2

Apakah yang dilakukan oleh continue di dalam loop?

Q3

Kenapa let i = 0; while (i < 3) { console.log(i); } tidak pernah berhenti?

Apa yang anda pelajari

  • for sesuai untuk mengira, for...of untuk melalui array, while untuk "ulang sehingga…".
  • Corak accumulator: sediakan sebelum loop, kemas kini di dalam, guna selepas.
  • continue melangkau satu pusingan; break menghentikan loop lebih awal.
  • Setiap loop perlukan sesuatu yang menggerakkannya ke arah jalan keluar — jika tidak, ia menjadi infinite loop.
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 3