Bagaimana cara memetakan array dalam javascript?

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

1. Buat array kosong untuk menyimpan hasilnya
2. Mulai loop for pada array angka
3. Kuadratkan setiap angka
4. 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

1. Tentukan fungsi yang mengkuadratkan angka
2. 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]

Bandingkan ini dengan sintaks fungsi biasa

[1, 4, 9, 16, 25]

Saat 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

[1, 4, 9, 16, 25]

Keluaran

[1, 4, 9, 16, 25]

Selanjutnya, 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]

Keluaran

[1, 4, 9, 16, 25]

Di 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)

Keluaran

const numbers = [1, 2, 3, 4, 5]

let squared = []

for (const number of numbers) {
    squared.push(number * number)
}

console.log(squared)

Contoh 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)

Keluaran

const numbers = [1, 2, 3, 4, 5]

let squared = []

for (const number of numbers) {
    squared.push(number * number)
}

console.log(squared)

Ini 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)

Keluaran

const numbers = [1, 2, 3, 4, 5]

let squared = []

for (const number of numbers) {
    squared.push(number * number)
}

console.log(squared)

Kesimpulan

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

Bisakah kita memetakan dalam array JavaScript?

Bagaimana cara memetakan array array JavaScript?

Bagaimana cara membuat peta dengan nilai array di JavaScript?

Apa peta () di JS?