Lompati ke konten utama
Modul 3 · Pelajaran 4 dari 412/32 dalam kursus~10 min
Pelajaran modul (4/4)

Mengulangi koleksi

Memanipulasi koleksi hampir selalu berarti mengulang: menelusurinya elemen satu per satu dan melakukan sesuatu untuk masing-masing elemen. Dalam pelajaran ini kita lihat sintaks dasar; dalam modul array fungsional (peta / filter / kurangi) kita akan belajar menulisnya secara lebih deklaratif.

for…of untuk array

Ini adalah loop yang hampir selalu ingin Anda gunakan untuk mengulangi array: it mengekstrak nilai di setiap langkah.

JS
const colori = ['rosso', 'verde', 'blu'];

for (const c of colori) {
  console.log(c);
}
// 'rosso'
// 'verde'
// 'blu'

Jika Anda juga memerlukan indeks, gunakan entries():

JS
for (const [i, c] of colori.entries()) {
  console.log(`${i}: ${c}`);
}
// '0: rosso', '1: verde', '2: blu'

for…in untuk objek — dengan hati-hati

for…in mengulangi kunci (string) suatu objek:

JS
const utente = { nome: 'Anna', eta: 28 };
for (const k in utente) {
  console.log(`${k} = ${utente[k]}`);
}

Object.keys / values / entries

Ini adalah cara ampuh untuk mengulangi suatu objek. Mereka mengembalikan array, dan sebagainya mereka berpadu sangat baik dengan for…of:

JS
const utente = { nome: 'Anna', eta: 28 };

Object.keys(utente); // ['nome', 'eta']
Object.values(utente); // ['Anna', 28]
Object.entries(utente); // [['nome', 'Anna'], ['eta', 28]]

for (const [k, v] of Object.entries(utente)) {
  console.log(`${k} → ${v}`);
}

Klasik for

for "jadul" masih ada. Anda jarang menggunakannya, tetapi ini berguna ketika Anda memerlukan kontrol yang baik atas indeks (melewatkan elemen, mengulangi mundur):

JS
for (let i = 0; i < colori.length; i++) {
  console.log(i, colori[i]);
}

// Backwards
for (let i = colori.length - 1; i >= 0; i--) {
  console.log(colori[i]);
}

Cobalah

Latihan#js.m3.l4.e1
Upaya: 0Memuat…

Diberikan `angka = [3, 5, 7]`, hitung jumlah semua elemen (15) dengan melakukan iterasi dengan for...of. Ekspresi terakhir harus dijumlahkan.

Memuat editor…
Tunjukkan petunjuk

for (konstanta n angka) { jumlah = jumlah + n; }

Solusi tersedia setelah 3 upaya

Tinjau latihan

Latihan#js.m3.l4.e2
Upaya: 0Memuat…

Diberikan `prices = { mela: 0.4, pera: 0.55, banana: 0.3 }`, kembalikan JUMLAH TOTAL entri dalam objek (3) menggunakan Object.keys.

Memuat editor…
Tunjukkan petunjuk

Object.keys(obj) mengembalikan array; .length memberitahukan berapa banyak kunci yang ada.

Solusi tersedia setelah 3 upaya