Wzorce niezmiennych aktualizacji
Proszę aktualizować dane, tworząc nowe kopie.
Wzorce niezmiennych aktualizacji to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Aktualizacja bez mutowania
Niemutowalne aktualizacje tworzą nową kopię z zastosowaną zmianą, pozostawiając oryginał bez zmian. To podstawa przewidywalnego zarządzania stanem we współczesnym JavaScript.
Głównym narzędziem jest operator spread ....
Kopiowanie obiektu za pomocą spread
Użyj operatora spread dla obiektu, aby utworzyć nowy obiekt, a następnie nadpisz właściwość. Oryginalny obiekt zachowuje starą wartość.
const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };
console.log(user.age);
console.log(older.age);To różne obiekty
Kopia jest zupełnie nowym obiektem, a nie tą samą referencją. Porównanie tożsamości to potwierdza.
const original = { x: 1 };
const copy = { ...original };
console.log(original === copy);
console.log(original.x === copy.x);Niemutowalne dodawanie właściwości
Aby dodać pole, rozwiń stary obiekt za pomocą operatora spread i uwzględnij nowy klucz. Oryginalny obiekt niczego nie zyskuje.
const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };
console.log(point);
console.log(point3d);Niemutowalne usuwanie właściwości
Użyj destrukturyzacji, aby wyodrębnić niepotrzebny klucz i przechwycić pozostałe właściwości. Obiekt zawierający resztę nie będzie go zawierać.
const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;
console.log(safe);
console.log(user.secret);Kopiowanie tablic za pomocą spread
Użyj operatora spread dla tablicy, aby ją skopiować. Metody takie jak map i filter również zwracają nowe tablice i nigdy nie modyfikują tablicy źródłowej.
const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);
console.log(nums);
console.log(doubled);Niemutowalne dodawanie do tablicy
Zamiast używać push, który modyfikuje tablicę, utwórz nową tablicę za pomocą operatora spread. Oryginalna długość pozostaje bez zmian.
const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];
console.log(list);
console.log(added);
console.log(prepended);Niemutowalne usuwanie z tablicy
Użyj filter, aby utworzyć nową tablicę bez niepożądanego elementu, pozostawiając oryginał bez zmian.
const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);
console.log(nums);
console.log(withoutThree);Aktualizowanie zagnieżdżonych obiektów
Aktualizacje zagnieżdżonych obiektów wymagają użycia operatora spread na każdym zmienianym poziomie. Odtwarzana jest tylko zmieniona gałąź, a pozostała część jest współdzielona przez referencję.
const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);Aktualizowanie elementu w tablicy
Użyj map, aby dla pasującego elementu zwrócić zmienioną kopię, a dla pozostałych — oryginalne elementy. Żaden element nie jest modyfikowany.
const todos = [
{ id: 1, done: false },
{ id: 2, done: false }
];
const updated = todos.map(t =>
t.id === 2 ? { ...t, done: true } : t
);
console.log(todos[1].done);
console.log(updated[1].done);Dlaczego niemutowalne aktualizacje mają znaczenie
Niemutowanie współdzielonego stanu ułatwia wykrywanie zmian (wystarczy porównywać referencje), umożliwia cofanie i ponawianie operacji oraz zapobiega błędom wynikającym z nieoczekiwanych modyfikacji. Wzorzec wygląda tak: skopiuj, a następnie zmień kopię. Następna lekcja omawia structuredClone do tworzenia głębokich kopii.
function setName(state, name) {
return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);Szybkie sprawdzenie
Co zwraca wyrażenie { ...user, age: 37 }, gdy user ma już właściwość age?
Podsumowanie: wzorce niemutowalnych aktualizacji
Poznali Państwo sposoby aktualizowania danych bez mutowania:
- Użyj operatora spread w wyrażeniu
{ ...obj, key: value }, aby skopiować obiekt i nadpisać właściwość. - Użyj destrukturyzacji z rest, aby niemutowalnie usunąć właściwość.
- Używaj
map,filteri operatora spread dla tablic zamiastpush/splice. - W przypadku zagnieżdżonych aktualizacji używaj operatora spread na każdym poziomie, a pozostałą część współdziel przez referencję.
Często zadawane pytania
Czy lekcja „Wzorce niezmiennych aktualizacji” jest bezpłatna?
Tak — pełny tekst „Wzorce niezmiennych aktualizacji” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Wzorce niezmiennych aktualizacji”?
Proszę aktualizować dane, tworząc nowe kopie. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Wzorce niezmiennych aktualizacji”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?
Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Object.freeze i seal
- Płytkie a głębokie zamrażanie
- Wzorce niezmiennych aktualizacji
- structuredClone do głębokiego kopiowania