Trzy przydatne punkty - reszta i spread w JavaScript

Parametry odpoczynku

Składnia reszty pozwala nam reprezentować nieokreśloną liczbę argumentów jako tablicę. Spójrzmy na funkcję, która sumuje wszystkie przekazane argumenty.

const sum = (...args) => args.reduce((prev, current) => prev + current);

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

Składnia spreadu

Operator spread pozwala nam rozszerzać obiekty iterowalne na pojedyncze elementy. Funkcjonalność ta jest przeciwieństwem tego, co osiągnęliśmy za pomocą pozostałych parametrów. Można go zastosować do wszystkich iterabli, takich jak tablice, obiekty, zbiory, mapy itp.

const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6

Trzy kropki w rzeczywistych przypadkach użycia

Kopiowanie tablicy

Składnia spread efektywnie przechodzi o jeden poziom głębiej podczas kopiowania tablicy. Jeden poziom oznacza, że kopiowany jest pierwszy poziom referencji.

const array0 = [1, [2, 3]];
const array1 = [...array0];

console.log(array1); // [1, [2, 3]]

Tworzenie tablicy unikalnych elementów

Utwórz zestaw, który przechowuje tylko unikalne elementy i przekonwertuj go z powrotem na tablicę.

const array = [1, 1, 2, 3];
const uniqueElements = [...new Set(array)];

console.log(uniqueElements); // [1, 2, 3]

Łączenie tablic

const array0 = [1, 2];;
const array1 = [3, 4];
const concated = [...array0, ...array1];

console.log(concated); // [1, 2, 3, 4]

Krojenie tablicy

const [firstElement, ...newArray] = [1, 2, 3, 4];

console.log(firstElement); // 1
console.log(newArray); // [2, 3, 4]

Możemy również usunąć n pierwsze elementy z przecinkami.

const [, , , ...newArray] = [1, 2, 3, 4];

console.log(newArray); // [4]

Wstawianie tablicy na początku innej tablicy

const array0 = [4, 5, 6];
const array1 = [1, 2, 3];
const newArray = [...array1, ...array0];

console.log(newArray); // [ 1, 2, 3, 4, 5, 6 ]

Generowanie tablicy liczb od 0 do n

const array = [...Array(10)].map((_, i) => i);

console.log(array); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Destrukcja obiektu

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Tworzenie kopii obiektu

let person = {
  name: 'John',
  wiek: 25,
  portfel: {
    suma: 500,
    waluta: 'USD'
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
// imię: "John",
// wiek: 25,
// portfel: {
// suma: 500,
// waluta: "USD
// }
// }

Należy zauważyć, że utworzona kopia obiektu jest nowym obiektem ze wszystkimi właściwościami oryginalnego obiektu, ale bez jego prototypowych informacji.

person.age = 20;

console.log(person.age); // 20
console.log(personCopy.age); // 25

Zauważ, że składnia rozprzestrzeniania tworzy "płytką" kopię obiektu, więc właściwość "wallet" zostanie skopiowana tylko jako odniesienie do oryginalnego podobiektu. Do głębokiego klonowania można użyć metody stringify/parse JSON lub metody "cloneDeep" dostarczanej przez Lodash, w zależności od złożoności obiektu. W niektórych przypadkach ta metoda może być również pomocna:

let personCopy = { ...person, wallet = { ...person.wallet}}; 

Warunkowe dodawanie właściwości do obiektów

Możemy warunkowo dodawać właściwości do nowego obiektu, który tworzymy, korzystając z operatora rozprzestrzeniania się wraz z oceną zwarcia.

const colors = {
  red: '#ff0000',
  zielony: '#00ff00',
  niebieski: '#0000ff'
};
const black = {
  czarny: '#000000'
};

let extraBlack = false;
let conditionalMerge = {
  ...colors,
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge);
// {
// czerwony: '#ff0000'
// zielony: "#00ff00",
// niebieski: '#0000ff'
// }

extraBlack = true;
conditionalMerge = {
  ...colors,
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge);
// {
// czerwony: '#ff0000'
// zielony: "#00ff00",
// niebieski: '#0000ff'
// czarny: "#000000
// }

Dzielenie ciągu znaków na znaki

Jest to podobne do wywołania metody split z pustym ciągiem jako parametrem.

const split = [...'qwerty'];
console.log(split); // [ 'q', 'w', 'e', 'r', 't', 'y' ]

Czytaj więcej:

3 typowe wyzwania związane z rozwojem oprogramowania dla startupów

Najlepsze rodzaje projektów dla Javy

Jak nie zabić projektu złymi praktykami kodowania?