Jak dodać parę klucz-wartość do obiektu w JavaScript?

By /

JavaScript

Dodawanie par klucz-wartość do obiektów w JavaScript jest podstawową operacją, która pozwala na dynamiczne manipulowanie i rozszerzanie obiektów o nowe właściwości. Ta umiejętność jest niezwykle przydatna podczas tworzenia złożonych aplikacji, gdzie często musimy modyfikować dane w odpowiedzi na interakcje użytkownika lub otrzymane odpowiedzi z serwera.

Przykład z użyciem HTML i JavaScript

W poniższym przykładzie pokazano, jak dodać nową parę klucz-wartość do istniejącego obiektu w JavaScript, a także jak zintegrować ten proces z prostą stroną HTML. Umożliwia to dynamiczne wyświetlanie zmodyfikowanych danych na stronie.

Kod HTML i JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodawanie klucza i wartości do obiektu</title>
</head>
<body>

<div id="carInfo"></div>

<script>
    // Obiekt opisujący samochód
    let car = {
        brand: "Ford",
        model: "Mustang",
        year: 1969
    };

    // Funkcja dodająca nową parę klucz-wartość do obiektu
    function addProperty(key, value) {
        car[key] = value;
    }

    // Dodanie nowej właściwości
    addProperty("color", "red");

    // Wyświetlanie informacji o samochodzie na stronie
    document.getElementById("carInfo").innerHTML = `Marka: ${car.brand}, Model: ${car.model}, Rok: ${car.year}, Kolor: ${car.color}`;
</script>

</body>
</html>

Wyjaśnienie

  • Najpierw definiujemy prosty obiekt car zawierający informacje o samochodzie.
  • Następnie tworzymy funkcję addProperty, która przyjmuje dwa argumenty: key (klucz) i value (wartość). Funkcja ta dodaje nową parę klucz-wartość do obiektu car za pomocą składni car[key] = value;.
  • Po zdefiniowaniu funkcji, wywołujemy ją, aby dodać nową właściwość color o wartości red do obiektu car.
  • Ostatecznie, używamy document.getElementById("carInfo").innerHTML do wyświetlenia zaktualizowanych informacji o samochodzie na stronie internetowej.

Podsumowanie

Dodawanie par klucz-wartość do obiektów w JavaScript jest prostą, ale potężną techniką, która pozwala na dynamiczne manipulowanie obiektami. Może być używana do dodawania nowych danych, modyfikowania istniejących właściwości lub nawet do tworzenia skomplikowanych struktur danych na bieżąco. Integracja z HTML pozwala na natychmiastowe odzwierciedlenie zmian w interfejsie użytkownika, co jest kluczowe w budowie interaktywnych aplikacji webowych.

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