Jak porównać dwa obiekty w JavaScript?

By /

JavaScript

Porównywanie obiektów w JavaScript może być nieco bardziej skomplikowane niż porównywanie prostych typów danych, takich jak liczby czy łańcuchy znaków. Dzieje się tak, ponieważ obiekty są porównywane przez referencję, a nie przez wartość. Oznacza to, że nawet jeśli dwa obiekty mają dokładnie takie same właściwości i wartości, będą uznane za różne, jeśli nie wskazują tego samego miejsca w pamięci. W tej lekcji pokażemy, jak porównać dwa obiekty w JavaScript, aby sprawdzić, czy mają takie same właściwości i wartości.

Przykład

Poniżej znajduje się przykład kodu, który demonstruje, jak porównać dwa obiekty w JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>Porównywanie obiektów w JavaScript</title>
</head>
<body>
    <h3>Wynik porównania obiektów:</h3>
    <div id="comparisonResult"></div>

    <script>
        // Funkcja do porównywania dwóch obiektów
        function compareObjects(obj1, obj2) {
            const keys1 = Object.keys(obj1);
            const keys2 = Object.keys(obj2);

            if (keys1.length !== keys2.length) {
                return false;
            }

            for (const key of keys1) {
                if (obj1[key] !== obj2[key]) {
                    return false;
                }
            }

            return true;
        }

        // Dwa obiekty do porównania
        let car1 = {
            brand: "Ford",
            model: "Mustang",
            year: 1969
        };

        let car2 = {
            brand: "Ford",
            model: "Mustang",
            year: 1969
        };

        // Wykonanie porównania
        let areObjectsEqual = compareObjects(car1, car2);

        // Wyświetlanie wyniku
        document.getElementById("comparisonResult").textContent =
            areObjectsEqual ? "Obiekty są identyczne." : "Obiekty różnią się.";
    </script>
</body>
</html>

Szczegółowy opis

  • Funkcja compareObjects: Ta funkcja przyjmuje dwa obiekty jako argumenty (obj1 i obj2) i porównuje ich właściwości oraz wartości. Najpierw pobierane są klucze obu obiektów za pomocą Object.keys() i sprawdzane, czy mają taką samą liczbę elementów. Następnie, za pomocą pętli for...of sprawdzane jest, czy wartości dla tych samych kluczy w obu obiektach są identyczne. Jeśli wszystkie klucze i wartości pasują, funkcja zwraca true; w przeciwnym razie zwraca false.
  • Obiekty car1 i car2: Są to dwa obiekty reprezentujące samochody, które mają identyczne właściwości i wartości, co czyni je “równymi” w kontekście naszego porównania.
  • Wyświetlanie wyniku: Wynik porównania jest wyświetlany w elemencie <div> o identyfikatorze comparisonResult. Tekst zmienia się w zależności od tego, czy funkcja compareObjects zwróciła true czy false.

Podsumowanie

Porównywanie obiektów w JavaScript wymaga szczegółowej analizy ich właściwości i wartości, ponieważ obiekty są porównywane przez referencję, a nie przez wartość. Funkcja compareObjects przedstawiona w tej lekcji to przykładowy sposób na dokonanie takiego porównania. Jest to przydatna technika, gdy musimy sprawdzić, czy dwa obiekty repreprezentują te same dane, mimo że mogą istnieć w różnych miejscach pamięci. Kluczowe jest tutaj iterowanie po kluczach obiektu i porównywanie odpowiadających im wartości.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top