Anda akan mempelajari cara menggunakan fungsi map() alih-alih perulangan for. Anda juga akan mempelajari apa itu callback, inline callback, dan fungsi panah
Semua teori didukung dengan contoh-contoh yang bagus
- Jika Anda mencari metode array berguna lainnya, jangan ragu untuk memeriksa artikel ini
Mengapa Menggunakan Metode map()?
Dalam JavaScript, Anda dapat menggunakan metode map() untuk membuat kode Anda lebih pendek dan ringkas
Metode map() memungkinkan Anda mengganti beberapa loop panjang dengan pernyataan steno yang menarik
Mari kita buat perbandingan
Untuk Loop
Dalam JavaScript, Anda dapat menggunakan perulangan for untuk mengulangi array
Mari kita lihat contoh penggunaan perulangan for untuk mengubah larik bilangan menjadi bilangan kuadrat
Untuk melakukan ini dengan perulangan for, Anda perlu melakukannya
- Buat array kosong untuk menyimpan hasilnya
- Mulai loop for pada array angka
- Kuadratkan setiap angka
- Tambahkan angka kuadrat ke larik hasil
Inilah tampilannya dalam kode
const numbers = [1, 2, 3, 4, 5] let squared = [] for (const number of numbers) { squared.push(number * number) } console.log(squared)Keluaran
[1, 4, 9, 16, 25] _Perulangan for menyelesaikan pekerjaan dengan sempurna
Juga, ini adalah sesuatu yang diajarkan kepada pemula sepanjang waktu
Namun, pendekatan ini lebih kompleks dari yang seharusnya
Alih-alih menggunakan perulangan for, Anda dapat menggunakan metode map() untuk membuat kode lebih pendek dan lebih mudah dibaca
Metode peta()
Dalam JavaScript, Anda dapat menggunakan metode map() untuk mengubah satu larik menjadi larik lainnya
Metode map() berfungsi sedemikian rupa sehingga memanggil fungsi untuk setiap elemen array. Ini kemudian menyimpan hasil pemanggilan fungsi ke dalam array baru
Mari ulangi contoh sebelumnya menggunakan metode map()
Untuk mengkuadratkan array angka menggunakan metode map(), Anda harus melakukannya
- Tentukan fungsi yang mengkuadratkan angka
- Panggil metode map() dengan fungsi kuadrat
Inilah tampilannya dalam kode
const numbers = [1, 2, 3, 4, 5] const squared = numbers.map(num => num * num) console.log(squared)Seperti yang Anda lihat, ini terlihat jauh lebih bersih daripada pendekatan for-loop
Anda sekarang mengerti mengapa metode map() berguna dalam JavaScript
Namun, dengan informasi ini, Anda tidak bisa berbuat banyak. Sebagai gantinya, Anda perlu mempelajari cara kerja metode map() secara mendetail
Saatnya untuk mendalami penggunaan metode map() dalam JavaScript
Metode map() dalam JavaScript
Dalam JavaScript, Array. map() metode memanggil fungsi untuk setiap elemen dalam array
Hasilnya adalah array baru dengan nilai transformasi baru
Mari kita mulai dengan melihat sintaks dari metode map()
Sintaks
Ada banyak kombinasi cara menggunakan metode map()
Anda harus memilih pendekatan berdasarkan apa yang ingin Anda capai
Berikut adalah daftar lengkap dari semua kemungkinan sintaks untuk memanggil metode map()
// 1. Map with callback functions map(callbackFn) map(callbackFn, thisArg) // 2. Map with inline callback functions map(function(element) { /* action */ }) map(function(element, index) { /* action */ }) map(function(element, index, array){ /* action */ }) map(function(element, index, array) { /* action */ }, thisArg) // 3. Map with arrow functions map((element) => { /* action */ }) map((element, index) => { /* action */ }) map((element, index, array) => { /* action */ })Mari kita periksa salah satu pendekatan terpanjang
map(function(element, index, array) { /* action */ }, thisArg)_Dalam ungkapan ini
- function adalah callback yang dipanggil untuk setiap elemen dalam array. Hasilnya disimpan dalam array baru. Callback mengambil argumen berikut
- elemen adalah elemen array saat ini yang sedang kita operasikan
- indeks adalah parameter opsional. Ini adalah indeks elemen saat ini sedang diproses
- array adalah larik tempat metode map() dipanggil
- argumen ini opsional. Ini menentukan nilai yang digunakan sebagai 'ini' saat memanggil callback pada elemen array
Sebagian besar waktu Anda hanya akan menentukan argumen elemen tanpa yang lain
Jadi jangan terlalu khawatir tentang argumen lain pada saat ini
Saya akan menunjukkan contoh ini menjelang akhir panduan ini
Sebelum melihat contoh metode map(), Anda perlu mempelajari apa itu fungsi callback
Panggilan balik dalam JavaScript
Dalam JavaScript, fungsi panggilan balik adalah fungsi yang diteruskan sebagai argumen ke fungsi lain
Misalnya, saat Anda menggunakan fungsi map(), Anda meneruskan fungsi lain yang dipanggil untuk setiap elemen dalam larik
Saat berhadapan dengan kode asinkron, Anda dapat menggunakan fungsi panggilan balik secara harfiah untuk memanggil kembali saat suatu tindakan selesai
Dari sinilah nama callback berasal
Jika Anda memiliki fungsi async, Anda dapat memberinya fungsi callback yang dijalankan hanya setelah tugas async selesai
Ini berguna karena Anda tidak perlu menghentikan seluruh program untuk menunggu aksi asinkron selesai. ×
Array. map() Metode dengan Fungsi Callback
Cara paling dasar untuk menggunakan metode map() adalah dengan meneruskannya ke fungsi callback
Misalnya, mari kita kuadratkan array angka
const numbers = [1, 2, 3, 4, 5] function square(number) { return number * number } const squared = numbers.map(square) console.log(squared)Keluaran
[1, 4, 9, 16, 25]_Seperti yang Anda lihat, fungsi kuadrat didefinisikan secara terpisah. Fungsi ini mengambil argumen angka dan mengembalikan versi kuadratnya
Anda kemudian meneruskan fungsi ini sebagai callback ke metode map()
Alasan mengapa Anda tidak memerlukan tanda kurung adalah karena metode map() hanya memerlukan nama fungsi. Ia tahu bagaimana menangani sisanya
Dengan kata lain, metode map()
- Mengambil nama fungsi apa pun yang diteruskan ke sana
- Mengambil elemen dari array
- Memanggil fungsi pada elemen
- Menambahkan hasilnya ke array baru
Sekarang Anda mengerti bagaimana menggunakan metode map() dengan fungsi callback
Tapi ini bukan cara biasa Anda memanggil metode map()
Lebih sering daripada tidak, Anda akan menggunakan salah satunya
- Fungsi panggilan balik sebaris
- Fungsi panah
Mari kita periksa kedua pendekatan ini mulai dari callback inline
Array. map() Metode dengan Fungsi Callback Inline
Kata "inline" mengacu pada fungsi yang digunakan dalam baris kode tempat penerapannya
Pada contoh sebelumnya, Anda memanggil metode map() dengan fungsi callback yang didefinisikan secara terpisah
Namun, Anda juga dapat menentukan inline callback saat memanggil metode map()
Ini berarti Anda mengimplementasikan fungsi tanpa nama langsung di pemanggilan metode map()
Sebagai contoh, mari kita kuadratkan array angka
const numbers = [1, 2, 3, 4, 5] const squared = numbers.map(function(number) { return number * number }) console.log(squared)Keluaran
[1, 4, 9, 16, 25]_Seperti yang Anda lihat, sekarang tidak ada fungsi persegi yang terpisah
Sebagai gantinya, ini didefinisikan dalam pemanggilan metode map() secara langsung
Tetapi mengapa Anda ingin melakukan ini?
Panggilan balik sebaris sangat bagus jika Anda hanya membutuhkan fungsionalitas sekali
Contoh di atas menunjukkan hal ini dengan baik
Anda hanya memerlukan fungsi kuadrat satu kali. Jadi tidak masuk akal untuk membiarkan fungsi yang tidak berguna tergantung di basis kode
Untuk mempersingkat panggilan balik sebaris, terkadang Anda dapat menggunakan fungsi panah
Mari kita bicara tentang fungsi panah selanjutnya
Array. map() Metode dengan Fungsi Panah
Fungsi panah adalah alternatif singkatan untuk ekspresi fungsi tradisional
Namun, Anda tidak selalu dapat menggunakan fungsi panah
Singkatnya, saya tidak akan mencantumkan batasan fungsi panah di sini. Sebagai gantinya, Anda dapat memeriksanya di sini
Fungsi panah dapat digunakan dengan sintaks berikut
[1, 4, 9, 16, 25]_1Bandingkan ini dengan sintaks fungsi biasa
[1, 4, 9, 16, 25]_2Saat menggunakan metode map() , Anda bisa memanfaatkan fungsi panah sebagai callback
Misalnya, mari kita kuadratkan array angka menggunakan fungsi panah
const numbers = [1, 2, 3, 4, 5] const squared = numbers.map(num => num * num) console.log(squared)Keluaran
[1, 4, 9, 16, 25]_Seperti yang Anda lihat, fungsi panah seperti ini membuat kode lebih mudah dibaca
Sekarang Anda telah melihat cara paling umum untuk menggunakan metode map()
Ini adalah saat yang tepat untuk mempelajari dengan cepat cara menggunakan argumen metode map() lainnya
- indeks
- Himpunan
- thisArg
Seperti yang telah disebutkan, ini biasanya tidak diperlukan, tetapi masih bermanfaat untuk memahami cara kerjanya
Contoh dengan Argumen Metode map() lainnya
Metode map() membutuhkan paling banyak 4 argumen secara total
map(function(element, index, array) { /* action */ }, thisArg)_Pada contoh sebelumnya, Anda hanya melihat contoh dengan argumen elemen
Namun terkadang Anda mungkin perlu menggunakan argumen lain juga
Mari kita lihat dua contoh
peta(fungsi(elemen, indeks, larik))
Saat memanggil map(), Anda dapat membuat callback menerima elemen array saat ini
Selain itu, Anda juga dapat mengakses indeks elemen saat ini dan array itu sendiri
Misalnya, diberi larik nama yang mewakili antrean di toko, tugas Anda adalah melakukannya
- Dapatkan posisi saat ini dari setiap orang dalam antrian
- Tentukan siapa yang datang setelah setiap orang
- Tambahkan informasi ini ke objek queueInfo
Untuk melakukan ini, Anda perlu mengakses elemen saat ini, indeksnya, dan larik itu sendiri
Inilah tampilannya dalam kode
Keluaran
[1, 4, 9, 16, 25]_7Selanjutnya, mari kita lihat cara mengganti ini di callback metode map()
peta(callback, thisArg)
Selain fungsi callback, metode map() mengambil parameter kedua, thisArg
Argumen ini memungkinkan Anda menimpanya dalam lingkup fungsi callback
Ini berguna jika Anda ingin menggunakan kembali callback dalam konteks yang berbeda
Misalnya, diberikan array koordinat x,y, mari kita ubah sesuai dengan ukuran layar tampilan saat ini
[1, 4, 9, 16, 25]_8Keluaran
[1, 4, 9, 16, 25]_9Di sini kami menetapkan ukuran layar saat ini sebagai thisArg dalam metode map()
Jika Anda mengubah tampilan lagi, yang perlu Anda lakukan adalah menentukan tampilan baru ke callback dengan menimpanya dalam pemanggilan metode map()
Contoh Kasus Penggunaan untuk Metode map()
Last but not least, mari kita lihat beberapa contoh cara menggunakan metode map()
Contoh 1. Panggil Fungsi untuk Setiap Elemen dalam Array
Anda dapat menggunakan metode map() untuk mengubah satu larik menjadi larik lain dengan memanggil fungsi untuk setiap elemen dalam larik
Misalnya, diberikan array string, mari buat array baru dengan string dalam huruf besar
const numbers = [1, 2, 3, 4, 5] let squared = [] for (const number of numbers) { squared.push(number * number) } console.log(squared)0Keluaran
const numbers = [1, 2, 3, 4, 5] let squared = [] for (const number of numbers) { squared.push(number * number) } console.log(squared)_1Contoh 2. Memformat Ulang Objek Array
Metode map() dapat digunakan saat bekerja dengan array objek juga
Misalnya, diberikan array objek pengguna, mari ubah nilai string menjadi huruf besar
const numbers = [1, 2, 3, 4, 5] let squared = [] for (const number of numbers) { squared.push(number * number) } console.log(squared)_2Keluaran
const numbers = [1, 2, 3, 4, 5] let squared = [] for (const number of numbers) { squared.push(number * number) } console.log(squared)_3Ini membuat larik baru dengan objek baru dengan transformasi yang diinginkan diterapkan padanya
Contoh 3. Konversi String ke Array Karakter
Ini adalah contoh bonusnya
Metode map() diketahui termasuk dalam tipe data Array
Namun, Anda dapat mengekstrak metode ini dari Array dan menggunakannya pada sebuah string
Untuk melakukan ini, gunakan. panggilan() metode
Itu. metode call() memungkinkan Anda menggunakan konteks satu objek untuk objek lainnya. Dalam hal ini, Anda dapat menggunakan metode map() yang dimiliki oleh Array pada sebuah String
Misalnya, mari kita ubah string menjadi array karakter huruf besar
const numbers = [1, 2, 3, 4, 5] let squared = [] for (const number of numbers) { squared.push(number * number) } console.log(squared)_4Keluaran
const numbers = [1, 2, 3, 4, 5] let squared = [] for (const number of numbers) { squared.push(number * number) } console.log(squared)5Kesimpulan
Hari ini Anda belajar cara menggunakan metode map() dalam JavaScript
Singkatnya, metode map() dapat digunakan untuk mengubah satu larik menjadi larik lainnya
Metode map() tidak mengubah larik asli. Sebaliknya, itu menciptakan yang baru
Metode peta bekerja dengan memanggil fungsi callback pada setiap elemen array. Fungsi ini mengembalikan nilai baru yang ditambahkan ke array baru yang diubah