Tre nyttige prikker - resten og spredningen i JavaScript

Parametere for hvile

Rest-syntaksen gjør at vi kan representere et ubestemt antall argumenter som en matrise. Ta en titt på en funksjon som summerer alle argumentene som er sendt inn.

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 lar oss utvide iterable objekter til individuelle elementer. Denne funksjonaliteten er motsatt av det vi oppnådde med rest-parametrene. Den kan brukes på alle iterable objekter, for eksempel matriser, objekter, sett, kart osv.

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

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

Tre prikker i reelle brukstilfeller

Kopiering av en matrise

Spread-syntaksen går effektivt ett nivå dypere når du kopierer en matrise. Ett nivå betyr at det første nivået av referanser kopieres.

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

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

Opprette en matrise med unike elementer

Opprett settet som bare lagrer unike elementer, og konverter det tilbake til en matrise.

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

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

Sammenkjede matriser

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

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

Slicing av en matrise

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]

Sette inn en matrise i begynnelsen av en annen matrise

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

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

Genererer en tallrekke fra 0 til n

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

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

Destrukturering av 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 }

Opprette en kopi av et objekt

la person = {
  navn: 'John',
  alder: 25
  lommebok: {
    sum: 500,
    valuta: 'USD'
  }
};
let personCopy = { ...person };

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

Merk at kopien av objektet som opprettes, er et nytt objekt med alle egenskapene til det opprinnelige objektet, men ingen av prototypinformasjonen.

person.alder = 20;

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

Legg merke til at spread-syntaksen skaper en "grunn" kopi av objektet, slik at "wallet"-egenskapen bare kopieres som en referanse til det opprinnelige underobjektet. For dyp kloning kan du bruke JSON stringify/parse-tilnærmingen eller "cloneDeep"-metoden som tilbys av Lodash, avhengig av objektets kompleksitet. I noen tilfeller kan denne metoden også være nyttig:

la personCopy = { ...person, lommebok = { ...person.lommebok}}; 

Betinget legge til egenskaper i objekter

Vi kan legge til betingede egenskaper i et nytt objekt som vi oppretter, ved å bruke spredningsoperatoren sammen med kortslutningsevaluering.

const colors = {
  red: '#ff0000',
  grønn: '#00ff00',
  blue: '#0000ff'
};
const black = {
  svart: '#000000'
};

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

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

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

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

Oppdeling av en streng i tegn

Dette tilsvarer å kalle split-metoden med en tom streng som parameter.

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

Les mer om dette:

3 vanlige utfordringer ved utvikling av programvareprodukter for oppstartsbedrifter

Den beste typen prosjekter for Java

Hvordan unngår man å drepe et prosjekt med dårlig kodingspraksis?