Cara menggunakan latihan filter javascript

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;

num > 50;

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

const numbers = [25, 50, 75];
const lessThan50 = numbers.filter((num) => {
  return num > 50;
});

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;

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;

num > 50;

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;

const shorterCharacters = characters.filter((character) => {
  return character.height < 200;
});

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;

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;