Data dan Halaman Web · Pelajaran 7 dari 10
Array dan metode map, filter, reduce
10 menit baca · BelajarCode
Dasar-dasar array
1const nilai = [85, 72, 90, 64];2console.log(nilai[0], nilai.length);3nilai.push(78);4nilai.unshift(100);5console.log(nilai);6console.log(nilai.pop(), nilai.shift());7console.log(nilai.includes(90), nilai.indexOf(64));8console.log(nilai.slice(1, 3));9console.log(nilai.join(" - "));85 4 [100,85,72,90,64,78] 78 100 true 3 [72,90] 85 - 72 - 90 - 64
pushmenambah di akhir,unshiftmenambah di awal.popmengambil dari akhir,shiftmengambil dari awal.slice(awal, akhir)mengambil sebagian tanpa mengubah array aslinya.
Jebakan mengurutkan angka
1const angka = [10, 9, 100, 25];2console.log([...angka].sort());3console.log([...angka].sort((a, b) => a - b));4console.log([...angka].sort((a, b) => b - a));[10,100,25,9] [9,10,25,100] [100,25,10,9]
Tanpa fungsi pembanding, sort mengurutkan sebagai teks, sehingga "100" berada sebelum "25". Untuk angka, selalu berikan pembanding (a, b) => a - b. Tanda [...angka] membuat salinan array, karena sort mengubah array aslinya.
map, filter, dan reduce
Tiga metode ini adalah alat utama mengolah array:
| Metode | Gunanya | Hasil |
|---|---|---|
map | Mengubah setiap isi | Array baru dengan panjang yang sama |
filter | Menyaring isi yang memenuhi syarat | Array baru yang mungkin lebih pendek |
reduce | Menggabungkan semua isi menjadi satu nilai | Satu nilai, misalnya jumlah |
1const harga = [12000, 45000, 8000, 30000];23const setelahPajak = harga.map((h) => h * 1.1);4const diAtas20rb = harga.filter((h) => h > 20000);5const total = harga.reduce((jumlah, h) => jumlah + h, 0);67console.log(setelahPajak);8console.log(diAtas20rb);9console.log(total);[13200.000000000002,49500.00000000001,8800,33000] [45000,30000] 95000
Angka seperti 13200.000000000002 muncul karena komputer menyimpan pecahan desimal dengan sedikit ketidaktepatan. Untuk uang, bulatkan dengan Math.round(h * 1.1).
Metode lain yang berguna
1const siswa = ["Andi", "Bela", "Citra", "Dimas"];2console.log(siswa.find((n) => n.startsWith("C")));3console.log(siswa.some((n) => n.length > 4));4console.log(siswa.every((n) => n.length >= 4));5console.log([...siswa, "Eka"]);Citra true true ["Andi","Bela","Citra","Dimas","Eka"]
Cek pemahaman
Apa hasil [1, 2, 3, 4].filter((x) => x % 2 === 0).map((x) => x * 10)?
Latihan
Rekap nilai dengan reduce
Dari array nilai [78, 92, 65, 88, 71, 95], hitung rata-rata dengan reduce, daftar nilai yang tuntas (75 ke atas) dengan filter, dan nilai tertinggi dengan Math.max dan operator spread.
Pembahasan
1const nilai = [78, 92, 65, 88, 71, 95];2const rata = nilai.reduce((jumlah, n) => jumlah + n, 0) / nilai.length;3const tuntas = nilai.filter((n) => n >= 75);4const tertinggi = Math.max(...nilai);56console.log(`Rata-rata: ${rata.toFixed(2)}`);7console.log("Tuntas:", tuntas);8console.log("Tertinggi:", tertinggi);Rata-rata: 81.50 Tuntas: [78,92,88,95] Tertinggi: 95
Math.max(...nilai) sama dengan Math.max(78, 92, 65, 88, 71, 95). Operator spread ... membongkar isi array menjadi argumen terpisah.
Jalankan contoh kode di pelajaran ini tanpa instalasi lewat compiler JavaScript online.