Cara Menggunakan Metode flat dan flatMap


Dalam artikel ini, saya akan menjelaskan cara menggunakan fungsi array baru flat() dan flatMap yang diperkenalkan di ES2019 (EcmaScript 2019). Teknik ini digunakan untuk meratakan array. Tekniknya bekerja dengan baik dan mudah diterapkan. Memanfaatkan teknik ini untuk proyek Anda yang akan datang akan sangat keren. Ambil secangkir kopi, dan mari kita mulai.


Apa itu Array?

Bahasa komputer yang berbeda menggunakan objek array sebagai struktur data untuk menyimpan berbagai koleksi data.


Contoh Array di Javascript

const array = [1, 2, 3, true, null, undefined];

console.log(array);

// expected output
1, 2, 3, true, null, undefined

Kode di atas membuat variabel yang disebut arr, tempat berbagai potongan dan data dari berbagai jenis data ditempatkan. Indeks untuk elemen pertama, 1, adalah 0. Tidak terdefinisi, elemen terakhir, terletak di indeks 5. Ingat bahwa objek array memiliki indeks nol, yang berarti elemen pertama dimulai dari nol.


Karakteristik Array JavaScript

  • Array diindeks nol, yang pada dasarnya berarti indeks nol adalah elemen pertama dari array. Di sini, "indeks" mengacu pada "posisi." Istilah yang benar untuk digunakan dalam JavaScript dan bahasa pemrograman lainnya adalah indeks daripada posisi.
  • Array JavaScript mampu menampung berbagai jenis data, termasuk nilai null, string, boolean, dan angka.
  • JavaScript memungkinkan pembuatan salinan dangkal, yang memungkinkan Anda menghasilkan salinan unik dari sebuah array tanpa mengubah array asli.

Metode Array JavaScript Baru

Salah satu struktur data yang paling banyak digunakan dalam JavaScript untuk menyimpan data adalah array. Anda dapat memanfaatkan berbagai cara untuk merampingkan proses dan meningkatkan kehidupan Anda. Diantaranya adalah reduce(), filter(), map(), flat(), flatMap(), dan masih banyak lagi. Namun, kami tidak akan membahas setiap metode array yang digunakan dalam JavaScript dalam posting ini. Sebagai gantinya, kita akan membahas metode flat() dan flatMap() baru yang dapat Anda gunakan untuk mengubah array asli menjadi array baru di artikel ini.


Cara Menggunakan Metode Array flat di JavaScript

Untuk membuat array baru dari array asli, gunakan teknik flat. Ini menyelesaikan ini dengan mengumpulkan dan menggabungkan semua sub-array dari array menjadi satu array. Kemampuan metode array ini untuk menghitung yang asli ke dalam array lain yang bergantung pada kedalaman array sangat penting untuk diingat. Pendekatan ini sangat membantu karena membuat komputasi operasi array jauh lebih sederhana.


Contoh metode array flat()

Cara mengatur parameter kedalaman?

array.flat(depth);

Nilai kedalaman adalah 1 secara default dan Anda dapat membiarkannya kosong. Nilai kedalaman mengambil nomor sebagai tipe datanya.


flat() contoh metode array 1

array.flat(1) sama dengan array.flat().

array.flat(2);

Kedalaman di atas adalah 2.

const arr = ["mon", "tues", ["wed", "thurs", ["fri", "sat"]], "sun"] ;

console.log(arr.flat());

// expected output 
["mon", "tues", "wed", "thurs", Array ["fri", "sat"], "sun"];

Jadi apa yang terjadi dalam kode ini? Dua sub-array pertama dalam array adalah ["wed", "kamis", ["fri", "sat"]]. Kami menggabungkan sub-array pertama menggunakan metode flat() pada array bernama arr karena kami tidak menentukan nilai kedalaman di dalam metode flat(). Ingat bahwa nilai kedalaman secara default adalah 1. Karena itu Anda mungkin dapat memperkirakan seperti apa objek array jika nilai kedalamannya 2.


flat() contoh metode array 2

const arr = [1, 2, [3, 4, 5], 6, 7];

console.log(arr.flat());

// expected output 
[1, 2, 3, 4, 5, 6, 7]

Array pada kode di atas memiliki sub-array yaitu [3, 4, 5]. Untuk menggabungkan dua array menjadi satu array, kami menggunakan metode flat() pada array bernama arr.


flat() contoh metode array 3

//depth 2 example 
const arr2 = [[[1, 2], 3, 4, 5]] ;

console.log(arr2.flat(2));

// expected output 
[1, 2, 3, 4, 5]

Array bernama arr2 dalam kode di atas memiliki dua sub-array. Karena nilai kedalaman 2 yang digunakan di dalam fungsi flat(2), kami menggabungkan dua array menjadi satu array menggunakan metode flat() pada arr2. Cari di atas untuk penjelasan singkat tentang apa yang dicapai nilai kedalaman. Metode array adalah pendekatan yang mudah untuk menggabungkan elemen array secara iteratif.


Cara Menggunakan Metode Array flatMap dalam JavaScript

Metode map() dan flat() digabungkan dalam metode flatMap() untuk menjalankan tugas. FlatMap() berulang melalui komponen array dalam satu lingkaran, menggabungkan semuanya menjadi satu level. Metode callback untuk flatMap() menerima sebagai argumen elemen saat ini dari array asli.

flatMap() contoh metode array

const arr3 = [1, 2, [4, 5], 6, 7, [8]] ;

console.log(arr3.flatMap((element) => element)); 

// expected output 
[1, 2, 4, 5, 6, 7, 8]

Array bernama arr3 dalam kode di atas memiliki dua sub-array yang berbeda. Dengan memberikan fungsi panggilan balik, (elemen) => elemen, yang menggilir array dan kemudian menggabungkan array menjadi satu array, kami dapat menggunakan metode flatMap() pada array. Ada kalanya Anda memiliki array dengan lebih dari satu kedalaman dan Anda memilih untuk membuat array baru hanya memiliki satu tingkat dasar. Mengikuti teknik flatMap(), Anda kemudian harus menggunakan fungsi flat().


Berikut ini contohnya:

const arr4 = [1, 2, [3, [4, 5, [6, 7]]]] ;

console.log(arr4.flatMap((element) => element).flat(2)) ;

// expected output 
[1, 2, 3, 4, 5, 6, 7]

Array yang ditunjuk arr4 dalam kode di atas memiliki tiga sub-array. Dengan memberikan fungsi panggilan balik, (elemen) => elemen, yang loop melalui array dan kemudian menggabungkan array, kami dapat menggunakan metode flatMap() pada array. Dengan menambahkan kedalaman 2, kami selanjutnya menggabungkan array menjadi satu array menggunakan metode flat(2). Latih contoh yang disebutkan di atas tanpa melewati metode flat(2) untuk mengamati perubahannya. Anda tidak perlu apa-apa lagi untuk mulai menggunakan dua teknik array baru ini.


Kesimpulan

Saya memberikan penjelasan dasar tentang array dan penggunaannya dalam JavaScript di artikel ini. Kemudian, kami mempelajari tentang dua metode array penting baru yang ditambahkan ECMAScript 2019, memungkinkan Anda untuk mengubah array awal menjadi array baru. Metode flat() dan flatMap() adalah salah satu metode array baru. Untuk menggabungkan sub-array secara rekursif ke dalam satu array, gunakan teknik flat(). Bergantung pada kedalaman array yang ingin Anda ratakan, fungsi flat() menerima nilai kedalaman sebagai parameter opsional (gabungan). Kedalaman default untuk fungsi flat() adalah 1. Di sisi lain, flatMap() pada dasarnya berfungsi dengan cara yang sama dengan pengecualian yang menggabungkan metode map() dan flat(). flatMap() menelusuri elemen array dan menggabungkannya. Kedua metode baru dapat digunakan untuk mengubah array yang ada menjadi array baru. Anda harus menggunakannya dalam proyek besar atau kecil Anda yang akan datang.