Tre nyttige prikker - resten og spredningen i JavaScript

Parametre for hvile

Rest-syntaksen giver os mulighed for at repræsentere et ubestemt antal argumenter som et array. Se på en funktion, der lægger alle de overførte argumenter sammen.

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

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

Spredt syntaks

Spread-operatoren giver os mulighed for at udvide iterable objekter til individuelle elementer. Denne funktionalitet er modsat af, hvad vi opnåede med restparametrene. Den kan anvendes på alle iterable objekter, f.eks. arrays, objekter, sæt, maps osv.

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

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

Tre prikker i virkelige brugssituationer

Kopiering af en matrix

Spread-syntaksen går effektivt et niveau dybere, når man kopierer et array. Et niveau betyder, at det første niveau af referencer kopieres.

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

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

Oprettelse af et array med unikke elementer

Opret et sæt, som kun gemmer unikke elementer, og konverter det tilbage til et array.

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

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

Sammenkædning af arrays

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

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

Skæring af en matrix

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

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

Vi kan også fjerne n første elementer med komma.

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

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

Indsæt et array i begyndelsen af et andet array

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

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

Generering af en række tal fra 0 til n

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

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

Destruktion af et objekt

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 }

Oprettelse af en kopi af et objekt

lad person = {
  navn: 'John',
  alder: 25,
  wallet: {
    sum: 500,
    valuta: 'USD'
  }
};
lad personCopy = { ...person };

console.log(personCopy);
// {
// navn: 'John',
// alder: 25,
// tegnebog: {
// sum: 500,
// valuta: 'USD'
// }
// }

Bemærk, at den kopi af objektet, der oprettes, er et nyt objekt med alle det oprindelige objekts egenskaber, men ingen af dets prototypiske oplysninger.

person.age = 20;

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

Bemærk, at spread-syntaksen skaber en "overfladisk" kopi af objektet, så "wallet"-egenskaben kopieres kun som en reference til det oprindelige underobjekt. Til dyb kloning kan du bruge JSON stringify/parse-tilgangen eller 'cloneDeep'-metoden fra Lodash afhængigt af dit objekts kompleksitet. I nogle tilfælde kan denne metode også være nyttig:

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

Betinget tilføjelse af egenskaber til objekter

Vi kan betinget tilføje egenskaber til et nyt objekt, som vi opretter, ved at bruge spread-operatoren sammen med kortslutningsevaluering.

const farver = {
  red: '#ff0000',
  grøn: '#00ff00',
  blue: '#0000ff'
};
const black = {
  sort: '#000000'
};

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

console.log(conditionalMerge);
// {
// rød: '#ff0000',
// grøn: '#00ff00',
// blue: '#0000ff'
// }

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

console.log(conditionalMerge);
// {
// rød: '#ff0000',
// grøn: '#00ff00',
// blue: '#0000ff'
// sort: '#000000'
// }

Opdeling af en streng i tegn

Det svarer til at kalde split-metoden med en tom streng som parameter.

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

Læs mere om det:

3 almindelige udfordringer ved softwareproduktudvikling for nystartede virksomheder

Den bedste type projekter til Java

Hvordan dræber man ikke et projekt med dårlig kodningspraksis?