W tym poście znajdziesz 3 proste sposoby na płytkie klonowanie (aka kopiowanie) obiektów w JavaScript.
Jako bonus, pokażę jak można również aktualizować, dodawać lub usuwać właściwości w miejscu klonu. Jest to przydatne, gdy chcesz wykonać aktualizację obiektu w niezmienny sposób.
Uwaga
Trzy sposoby klonowania obiektów opisane w tym poście wykonują płytkie kopiowanie.
Płytka kopia oznacza, że kopiowany jest tylko sam obiekt. Jeśli kopiowany obiekt zawiera obiekty zagnieżdżone – te obiekty zagnieżdżone nie są klonowane.
Spis treści
- 1. Klonowanie przy użyciu object spread
- 2. Klonowanie przy użyciu object rest
- 3. Klonowanie przy użyciu Object.assign()
- 4. Podsumowanie
1. Klonowanie przy użyciu object spread
Najprostszym sposobem na sklonowanie zwykłego obiektu JavaScript jest wywołanie operatora object spread:
const clone = { ...object};
Gdzie object
jest obiektem, który chciałbyś skopiować, a clone
jest płytką kopią object
.
Na przykład, stwórzmy płytką kopię obiektu hero
:
const hero = { name: 'Batman', city: 'Gotham'};const heroClone = { ...hero};heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false
heroClone
jest obiektem-klonem hero
, co oznacza, że zawiera wszystkie właściwości hero
.
hero === heroClone
evalutes to false
hero
i heroClone
są jednak instancjami obiektów różnicowych.
1.1 Bonus Object spread: dodawanie lub aktualizowanie sklonowanych rekwizytów
Bezpośrednią korzyścią z używania object spread jest to, że możesz aktualizować lub dodawać nowe właściwości do sklonowanego obiektu na miejscu, jeśli tego potrzebujesz.
Sklonujmy obiekt hero
, ale zaktualizujmy name
właściwość do innej wartości i dodajmy nową właściwość realName
:
const hero = { name: 'Batman', city: 'Gotham'};const heroEnhancedClone = { ...hero, name: 'Batman Clone', realName: 'Bruce Wayne'};heroEnhancedClone; // { name: 'Batman Clone', city: 'Gotham', realName: 'Bruce Wayne' }
2. Klonowanie przy użyciu object rest
Innym dobrym sposobem na płytkie klonowanie obiektów jest użycie operatora object rest:
const { ...clone } = object;
Ponownie, użyjmy operatora rest, aby stworzyć kopię hero
obiektu:
const hero = { name: 'Batman', city: 'Gotham'};const { ...heroClone } = hero;heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false
Po zastosowaniu operatora reszty const { ...heroClone } = hero
, zmienna heroClone
zawiera kopię obiektu hero
.
2.1 Bonus Object Rest: pomijaj sklonowane rekwizyty
Miłym bonusem podczas korzystania z object rest jest możliwość pomijania pewnych właściwości podczas klonowania.
Na przykład, stwórzmy klon obiektu hero
, ale pomińmy city
właściwość w klonie:
const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = hero;heroClone; // { name: 'Batman' }
2.2 Super bonus: łączenie rozprzestrzeniania obiektów i odpoczynku
Object spread przynosi bonus w postaci aktualizacji lub dodawania nowych właściwości, podczas gdy object rest ma korzyść z pomijania właściwości w wynikowym klonie.
Czy można połączyć object spread i rest w jedno oświadczenie, aby odziedziczyć wszystkie te korzyści? Tak, możesz!
Klonujmy obiekt hero
, dodając również nową właściwość realName
i pomijając właściwość city
:
const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = { ...hero, realName: 'Bruce Wayne'};heroClone; // { name: 'Batman', realName: 'Bruce Wayne' }
Połączenie rozprzestrzeniania obiektów i reszty do klonowania obiektów i wykonywania manipulacji właściwościami w jednym oświadczeniu jest świetne!
3. Klonowanie za pomocą Object.assign()
Wreszcie, Object.assign(target, ...sources)
pozwala ci peform ten sam klon obiektu:
const clone = Object.assign({}, object);
Wykorzystajmy Object.assign()
w praktyce i stwórzmy obiekt klon obiektu hero
:
const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero);heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false
Object.assign({}, hero)
tworzy klon hero
obiektu poprzez połączenie drugiego argumentu hero
w pierwszy argument {}
.
3.1 Object.assign() bonus: dodaj lub zaktualizuj sklonowane rekwizyty
Object.assign()
umożliwia również aktualizację lub dodanie nowych właściwości do klonu.
Skopiujmy obiekt hero
, ale jednocześnie zaktualizujmy name
właściwość:
const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero, { name: 'Batman Clone' });heroClone; // { name: 'Batman Clone', city: 'Gotham' }
Object.assign({}, hero, { name: 'Batman Clone' })
tworzy obiekt w 2 krokach.
Po pierwsze, drugi argument hero
jest łączony z pierwszym argumentem {}
. To równa się { name: 'Batman', city: 'Gotham' }
.
Po drugie, trzeci argument { name: 'Batman Clone' }
jest łączony z wynikiem z poprzedniego kroku, nadpisując właściwość name
. Na koniec otrzymujemy obiekt { name: 'Batman Clone', city: 'Gotham' }
.
4. Podsumowanie
JavaScript dostarcza 3 dobrych sposobów na klonowanie obiektów: za pomocą operatora spread, operatora rest oraz funkcji Object.assign()
.
Oprócz zwykłego klonowania obiektów, używanie operatora rozprzestrzeniania obiektów i Object.assign()
pozwala na dodawanie lub aktualizowanie właściwości podczas tworzenia klonu.
Rest operator daje również korzyści z pomijania niektórych właściwości podczas klonowania.
I co jest świetne, możesz połączyć rozprzestrzenianie obiektu i odpoczynek w jednym oświadczeniu, więc możesz sklonować obiekt, a jednocześnie dodać, zaktualizować lub pominąć właściwości z klonowania.
To jest przydatne, jeśli chciałbyś objąć niezmienność i móc manipulować właściwościami sklonowanego obiektu w miejscu.
Jakie jeszcze znasz dobre sposoby na klonowanie obiektów w JavaScript?