Spread obiektów w JavaScript: kopiowanie i łączenie

Spread rozkłada obiekt wewnątrz innego

Składnia spread obiektów, czyli trzy kropki przed obiektem, kopiuje własne, przeliczalne właściwości tego obiektu do otaczającego literału obiektu. To najkrótsza droga do kopiowania, łączenia i tworzenia zmienionych kopii bez ruszania oryginału.

const user = { name: "Rosa", role: "admin" };
const copy = { ...user };

console.log(copy);
console.log(copy === user);

copy ma te same klucze i wartości co user, ale to inny obiekt. Zmiana jednego nie wpływa na drugi, przynajmniej na najwyższym poziomie. Do tego zastrzeżenia zaraz wrócimy.

Model myślowy: { ...obj } znaczy "wlej właściwości obj do tego nowego literału obiektu". Wszystko, co napiszesz obok spreadu, staje się częścią wyniku.

Kopiowanie i nadpisywanie w jednym kroku

Najczęstszy wzorzec to rozłożenie obiektu i dodanie lub nadpisanie kilku właściwości. Późniejsze klucze wygrywają, więc najpierw spread, a potem nadpisania:

const user = { name: "Rosa", role: "admin", active: true };

const updated = { ...user, role: "editor" };

console.log(user.role);
console.log(updated.role);

user pozostaje nietknięty. updated to nowy obiekt z podmienionym role. Ten wzorzec niemutowalnej aktualizacji pojawia się wszędzie we współczesnym JavaScript: w aktualizacjach stanu w React, w reducerach Reduksa i w każdym kodzie, który woli nie modyfikować danych w miejscu.

Odwróć kolejność, a zachowanie będzie odwrotne:

const user = { name: "Rosa", role: "admin" };

const withDefault = { role: "guest", ...user };

console.log(withDefault.role);

Tutaj role: "guest" jest pierwsze, więc user.role je nadpisuje. Przydaje się, gdy chcesz mieć wartości domyślne, które rozkładany obiekt może nadpisać.

Łączenie obiektów

Rozłóż dwa (lub więcej) obiekty w nowym literale, żeby je połączyć. Przy powtarzających się kluczach późniejsze obiekty nadpisują wcześniejsze:

const defaults = { theme: "light", fontSize: 14, debug: false };
const userPrefs = { theme: "dark", fontSize: 16 };

const settings = { ...defaults, ...userPrefs };

console.log(settings);

theme i fontSize pochodzą z userPrefs, a debug przechodzi z defaults. Trzy obiekty? Cztery? Ta sama zasada: czytasz od początku do końca, wygrywa ostatni zapis.

To współczesny zamiennik Object.assign({}, defaults, userPrefs). Oba robią to samo, ale wersja ze spreadem jest czytelniejsza i nie kusi do popularnego błędu, czyli napisania Object.assign(defaults, userPrefs), co modyfikuje defaults.

Spread to płytka kopia

To ta część, na której ludzie się potykają. Spread kopiuje właściwości obiektu z najwyższego poziomu. Jeśli wartość właściwości sama jest obiektem lub tablicą, kopiowana jest referencja, a nie zawartość.

const user = {
  name: "Rosa",
  address: { city: "Lisbon", zip: "1100" }
};

const copy = { ...user };

copy.address.city = "Porto";

console.log(user.address.city);
console.log(copy.address.city);

Zmiana copy.address.city zmieniła też user.address.city, bo oba obiekty współdzielą ten sam obiekt address. Spread dał nam tylko nowe zewnętrzne opakowanie.

Kiedy musisz zmienić coś zagnieżdżonego, użyj spreadu na każdym poziomie, który zmieniasz:

const user = {
  name: "Rosa",
  address: { city: "Lisbon", zip: "1100" }
};

const updated = {
  ...user,
  address: { ...user.address, city: "Porto" }
};

console.log(user.address.city);
console.log(updated.address.city);

Do prawdziwie głębokiej kopii dowolnych danych sięgnij po structuredClone(obj). Radzi sobie z zagnieżdżonymi obiektami, tablicami, datami, mapami i zbiorami, i jest wbudowany w każde współczesne środowisko uruchomieniowe.

Spread vs rest

Mają te same trzy kropki, ale robią odwrotne rzeczy. Spread rozkłada, rest zbiera.

const user = { name: "Rosa", role: "admin", active: true };

// Rest: collect leftover properties into a new object.
const { name, ...others } = user;
console.log(name);
console.log(others);

// Spread: pour properties into a new literal.
const clone = { ...others, name };
console.log(clone);

Praktyczna zasada: jeśli ... stoi po lewej stronie = (destrukturyzacja), to rest. Jeśli jest w literale obiektu lub tablicy po prawej stronie, to spread.

Usuwanie właściwości bez mutacji

Połączenie destrukturyzacji z rest i spreadu daje czysty sposób na kopię obiektu bez jednego klucza, bez delete i bez mutacji:

const user = { name: "Rosa", role: "admin", tempToken: "abc123" };

const { tempToken, ...safe } = user;

console.log(safe);
console.log(user.tempToken);

tempToken trafia do osobnej zmiennej (którą ignorujesz), a cała reszta ląduje w safe. Oryginalny user pozostaje nietknięty.

Czego spread nie kopiuje

Kilka niuansów, które warto znać:

• Właściwości nieprzeliczalne (non-enumerable) nie są kopiowane. Większość tworzonych właściwości jest domyślnie przeliczalna, ale właściwości zdefiniowane przez Object.defineProperty i niektóre wbudowane już nie.
• Prototyp nie jest kopiowany. { ...instance } daje zwykły obiekt, a nie instancję oryginalnej klasy. Metod zdefiniowanych na prototypie klasy nie będzie w kopii.
• Gettery są wywoływane. Spread obiektu z getterem wywołuje getter raz i zapisuje zwróconą wartość jako zwykłą właściwość nowego obiektu.

class Point {
  constructor(x, y) { this.x = x; this.y = y; }
  distance() { return Math.hypot(this.x, this.y); }
}

const p = new Point(3, 4);
const copy = { ...p };

console.log(copy.x, copy.y);
console.log(copy instanceof Point);
console.log(typeof copy.distance);

copy ma x i y, ale to zwykły obiekt: distance mieszka w Point.prototype, którego spread nie dotknął. Jeśli musisz skopiować instancję klasy, zwykle sama klasa musi udostępnić własną metodę clone.

Dalej: metody tablic

Spread to jeden element zestawu narzędzi do niemutowalnych danych. Drugi duży element to metody tablic: map, filter, reduce i spółka, które tworzą nowe tablice zamiast modyfikować oryginały. O nich na następnej stronie.