Larik JavaScript memiliki beberapa metode bawaan yang kuat yang mempermudah bekerja dengannya. Pada artikel ini, mari kita lihat metode array filter()
Mulai
Posting ini adalah bagian dari seri yang berfokus pada pembelajaran metode array JavaScript. Anda dapat menemukan kode awal di repositori ini
Di repositori itu, ada file num > 50;0 dengan beberapa contoh data Star Wars. Jadi, tiru repositori, buka file num > 50;0, dan gulir ke bawah ke bagian Filter. Sebagai alternatif, Anda dapat menyalin data sampel ke file JavaScript tanpa kloning jika Anda mau
Berikut data sampelnya
const characters = [ { name: "Luke Skywalker", height: 172, mass: 77, eye_color: "blue", gender: "male", }, { name: "Darth Vader", height: 202, mass: 136, eye_color: "yellow", gender: "male", }, { name: "Leia Organa", height: 150, mass: 49, eye_color: "brown", gender: "female", }, { name: "Anakin Skywalker", height: 188, mass: 84, eye_color: "blue", gender: "male", }, ];Ikhtisar Filter Larik
Metode filter mengembalikan array baru dengan hanya item yang ingin kita sertakan. Kami memberi tahu metode filter item mana yang akan disertakan dengan meneruskannya ke fungsi callback. Fungsi panggilan balik ini menerima satu parameter (setiap item dalam larik), lalu kami mengembalikan boolean apakah item tersebut harus disertakan atau tidak dalam hasil yang difilter
Misalnya, jika kita memiliki deretan angka dan kita hanya menginginkan angka yang lebih besar dari 50, kondisi filter kita akan terlihat seperti ini
num > 50;Jadi, seluruh filter akan terlihat seperti ini
Mari kita lihat beberapa latihan
1. Dapatkan karakter dengan massa lebih besar dari 100
Ingat kita memanggil filter dengan meneruskannya fungsi callback yang menentukan apakah item tertentu harus difilter atau disertakan atau tidak. Dalam hal ini, kondisinya adalah num > 50;2. Jadi, filter kita akan terlihat seperti ini
const greater100Characters = characters.filter((character) => { return character.mass > 100; });_Karena fungsi panggilan balik kita memiliki pengembalian satu baris, kita dapat menyederhanakan fungsi panah ini dengan menghilangkan kata kunci num > 50;3 dan tanda kurung fungsi. Sintaks ini menyiratkan pengembalian implisit yang berarti bahwa apa pun yang muncul setelah num > 50;4 akan dikembalikan secara otomatis
const greater100Characters = characters.filter( (character) => character.mass > 100 );_2. Dapatkan karakter dengan tinggi kurang dari 200
Sekarang, kondisi kita sedikit berubah. Kondisinya adalah num > 50;5
Dan lagi, kita bisa menggunakan sintaks yang disingkat untuk pengembalian implisit
const shorterCharacters = characters.filter( (character) => character.height < 200 );3. Dapatkan semua karakter pria
Sekarang, kita hanya ingin mendapatkan karakter laki-laki dengan mencentang properti num > 50;6 dari setiap karakter
const maleCharacters = characters.filter( (character) => character.gender === "male" );4. Dapatkan semua karakter wanita
Terakhir, kita dapat men-tweak filter sebelumnya untuk mencari string "perempuan" sebagai properti num > 50;6