Jak poprawnie filtrować dane w JavaScript?

By /

JavaScript

Filtrowanie danych jest podstawową operacją w programowaniu, która pozwala na selektywne przetwarzanie tylko tych elementów danych, które spełniają określone kryteria. JavaScript oferuje kilka sposobów na efektywne filtrowanie danych, a jednym z najbardziej użytecznych jest metoda filter() dostępna na tablicach. Ta metoda tworzy nową tablicę zawierającą wszystkie elementy oryginalnej tablicy, które spełniają warunek zdefiniowany w przekazanej funkcji callback.

Przykład użycia metody filter() w JavaScript

W tym przykładzie pokażemy, jak użyć metody filter() do filtrowania listy obiektów reprezentujących samochody. Będziemy filtrować samochody według roku produkcji.

Struktura HTML
<!DOCTYPE html>
<html>
<head>
    <title>Filtrowanie danych w JavaScript</title>
</head>
<body>
    <h3>Lista samochodów przed 2000 rokiem:</h3>
    <ul id="carList"></ul>

    <script src="filterCars.js"></script>
</body>
</html>
Kod JavaScript (filterCars.js)
// Lista obiektów opisujących samochody
let cars = [
    { brand: "Ford", model: "Mustang", year: 1969 },
    { brand: "Chevrolet", model: "Camaro", year: 2020 },
    { brand: "Toyota", model: "Corolla", year: 1998 },
    { brand: "Fiat", model: "500", year: 1970 }
];

// Funkcja filtrująca samochody przed 2000 rokiem
function filterCarsByYear(cars, year) {
    return cars.filter(car => car.year < year);
}

// Wykorzystanie funkcji do filtrowania i wyświetlenia wyników
let oldCars = filterCarsByYear(cars, 2000);
let carListElement = document.getElementById('carList');

oldCars.forEach(car => {
    let li = document.createElement('li');
    li.textContent = `${car.brand} ${car.model} (${car.year})`;
    carListElement.appendChild(li);
});

Opis działania

  1. Definicja danych: Na początku tworzymy listę obiektów cars, gdzie każdy obiekt reprezentuje samochód z określoną marką, modelem i rokiem produkcji.
  2. Funkcja filtrująca: Następnie definiujemy funkcję filterCarsByYear, która przyjmuje tablicę samochodów i rok, filtruje samochody starsze niż podany rok, i zwraca nową tablicę zawierającą tylko te samochody.
  3. Wyświetlanie wyników: Wykorzystując metodę forEach, iterujemy po przefiltrowanej liście samochodów, tworzymy dla każdego element li z opisem samochodu, i dodajemy ten element do listy na stronie.

Podsumowanie

Filtrowanie danych w JavaScript za pomocą metody filter() jest potężnym narzędziem, które pozwala na szybkie i efektywne przetwarzanie kolekcji danych. Dzięki elastyczności funkcji callback, metoda filter() może być zastosowana do szerokiego zakresu danych i kryteriów filtrowania, co czyni ją niezwykle przydatną w codziennym programowaniu.

Powiązane artykuły

Scroll to Top