Tre användbara prickar - resten och spridningen i JavaScript

Parametrar för vila

Med rest-syntaxen kan vi representera ett obegränsat antal argument som en array. Ta en titt på en funktion som summerar alla argument som skickas.

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

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

Spridd syntax

Med spread-operatorn kan vi expandera iterabla objekt till enskilda element. Denna funktionalitet är motsatt till vad vi uppnådde med restparametrarna. Den kan tillämpas på alla iterabla objekt, t.ex. arrayer, objekt, set, maps osv.

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

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

Tre prickar i verkliga användningsfall

Kopiera en matris

Spread-syntaxen går effektivt en nivå djupare när en array kopieras. En nivå innebär att den första nivån av referenser kopieras.

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

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

Skapa en array med unika element

Skapa Set som endast lagrar unika element och konvertera tillbaka det till en array.

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

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

Konkatenera matriser

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

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

Skära upp en matris

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

console.log(förstaElement); // 1
console.log(newArray); // [2, 3, 4]

Vi kan också ta bort n första elementen med kommatecken.

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

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

Infoga en array i början av en annan array

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

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

Generera en matris med siffror från 0 till n

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

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

Destruktion av ett 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 }

Skapa en kopia av ett objekt

låt person = {
  namn: "John",
  ålder: 25,
  plånbok: {
    summa: 500,
    valuta: 'USD'
  }
};
låt personCopy = { ...person };

console.log(personCopy);
// {
// namn: 'John',
// ålder: 25,
// plånbok: {
// summa: 500,
// valuta: 'USD'
// }
// }

Observera att den kopia av objektet som skapas är ett nytt objekt med alla originalobjektets egenskaper men ingen av dess prototypinformation.

person.ålder = 20;

console.log(person.ålder); // 20
console.log(personCopy.ålder); // 25

Observera att spread syntax skapar en "ytlig" kopia av objektet, så egenskapen "wallet" kopieras endast som en referens till det ursprungliga underobjektet. För djup kloning kan du använda JSON stringify/parse-metoden eller "cloneDeep"-metoden som tillhandahålls av Lodash beroende på objektets komplexitet. I vissa fall kan den här metoden också vara till hjälp:

låt personCopy = {...person, plånbok = {...person.plånbok}}; 

Villkorligt tillägg av egenskaper till objekt

Vi kan villkorligt lägga till egenskaper i ett nytt objekt som vi skapar genom att använda spread-operatorn tillsammans med kortslutningsutvärdering.

const färger = {
  röd: '#ff0000',
  grön: '#00ff00',
  blue: '#0000ff'
};
const black = {
  svart: '#000000'
};

låt extraBlack = false;
låt conditionalMerge = {
  ...färger,
  ...(extraBlack ? svart : {})
};

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

extraBlack = true;
conditionalMerge = {
  ...färger,
  ...(extraBlack ? svart : {})
};

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

Dela upp en sträng i tecken

Detta är ungefär som att anropa split-metoden med en tom sträng som parameter.

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

Läs mer om detta:

3 Vanliga utmaningar för nystartade företag inom mjukvaruproduktutveckling

Den bästa typen av projekt för Java

Hur undviker man att döda ett projekt med dåliga kodningsrutiner?