Jak skopiować właściwości z jednego obiektu do drugiego w JavaScript?

By /

JavaScript

W JavaScript często pojawia się potrzeba skopiowania właściwości z jednego obiektu do drugiego. Może to być przydatne w wielu scenariuszach, takich jak łączenie konfiguracji, aktualizowanie stanów obiektów, czy tworzenie kopii obiektów z zachowaniem pewnych właściwości. W tej lekcji przejdziemy przez różne sposoby kopiowania właściwości między obiektami w JavaScript.

Sposoby kopiowania właściwości

  1. Pętla for...in: Tradycyjna metoda iteracji po wszystkich własnych wyliczalnych właściwościach obiektu.
  2. Object.assign(): Metoda służąca do kopiowania wartości wszystkich własnych wyliczalnych właściwości z jednego lub więcej źródłowych obiektów do obiektu docelowego.
  3. Spread operator (...): Nowoczesna składnia pozwalająca na łatwe kopiowanie właściwości obiektów.

Przykład z kodem

Rozważmy następujący scenariusz: mamy obiekt reprezentujący konfigurację domyślną aplikacji i chcemy zaktualizować tę konfigurację na podstawie obiektu z konfiguracją użytkownika. Oto jak możemy to zrobić:

HTML + JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Copy Object Properties Example</title>
</head>
<body>
    <script>
        // Obiekt z domyślną konfiguracją
        const defaultConfig = {
            theme: "light",
            notifications: true,
            location: "home"
        };

        // Obiekt z konfiguracją użytkownika
        const userConfig = {
            theme: "dark",
            location: "work"
        };

        // Kopiowanie właściwości z userConfig do defaultConfig
        // Metoda 1: Pętla for...in
        for (const key in userConfig) {
            if (userConfig.hasOwnProperty(key)) {
                defaultConfig[key] = userConfig[key];
            }
        }

        // Metoda 2: Object.assign()
        // const updatedConfig = Object.assign({}, defaultConfig, userConfig);

        // Metoda 3: Spread operator
        // const updatedConfig = {...defaultConfig, ...userConfig};

        console.log(defaultConfig);
        // console.log(updatedConfig); // Użyj, gdy korzystasz z metody 2 lub 3
    </script>
</body>
</html>

Wyjaśnienie

  • W powyższym przykładzie najpierw definiujemy dwa obiekty: defaultConfig z domyślnymi ustawieniami i userConfig z ustawieniami dostarczonymi przez użytkownika.
  • Następnie, używamy pętli for...in do iteracji po wszystkich właściwościach userConfig i kopiowania ich do defaultConfig. Warto zauważyć, że przed kopiowaniem sprawdzamy, czy właściwość faktycznie należy do obiektu userConfig za pomocą hasOwnProperty(), aby uniknąć niezamierzonego kopiowania właściwości dziedziczonych.
  • Alternatywnie, moglibyśmy użyć Object.assign() lub operatora rozproszenia (...) do osiągnięcia tego samego efektu bez bezpośredniej modyfikacji obiektu defaultConfig, tworząc zamiast tego nowy obiekt updatedConfig zawierający połączenie obu konfiguracji.

Podsumowanie

Kopiowanie właściwości między obiektami w JavaScript jest powszechnym zadaniem, które można wykonać na kilka różnych sposobów. Wybór metody zależy od konkretnego przypadku użycia, w tym od tego, czy chcemy modyfikować istniejące obiekty czy tworzyć nowe.

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