Guinguette Marais Poitevin

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.

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 falsehero 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?