Drie nuttige punten - de rest en de spreiding in JavaScript

Rustparameters

Met de rest-syntax kunnen we een onbepaald aantal argumenten weergeven als een array. Kijk eens naar een functie die alle doorgegeven argumenten optelt.

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

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

Syntaxis spreiding

Met de spread operator kunnen we iterable objecten uitzetten in individuele elementen. Deze functionaliteit is tegengesteld aan wat we bereikten met de restparameters. Het kan worden toegepast op alle iterables, zoals arrays, objecten, sets, maps, enz.

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

console.log(som(...getallen)); // 6

Drie punten in echte gebruikssituaties

Een matrix kopiëren

De spread syntaxis gaat effectief één niveau dieper tijdens het kopiëren van een array. Eén niveau betekent dat het eerste niveau van referenties wordt gekopieerd.

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

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

Een array van unieke elementen maken

Maak een Set die alleen unieke elementen opslaat en converteer deze terug naar een array.

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

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

Matrixen samenvoegen

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

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

Een array snijden

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

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

We kunnen ook het volgende verwijderen n eerste elementen met komma.

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

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

Een matrix aan het begin van een andere matrix invoegen

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

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

Een reeks getallen van 0 tot en met n

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

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

Een object destructureren

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 }

Een kopie van een object maken

let person = {
  naam: 'John',
  leeftijd: 25,
  portemonnee: {
    som: 500,
    munteenheid: 'USD
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
// naam: 'John
// leeftijd: 25,
// portemonnee: {
// som: 500,
// munteenheid: 'USD
// }
// }

Merk op dat de kopie van het object dat wordt gemaakt een nieuw object is met alle eigenschappen van het oorspronkelijke object, maar zonder zijn prototype-informatie.

person.age = 20;

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

Merk op dat de gespreide syntaxis een 'ondiepe' kopie van het object maakt, dus de eigenschap 'wallet' wordt alleen gekopieerd als een verwijzing naar het oorspronkelijke subobject. Voor deep-cloning kun je JSON stringify/parse gebruiken of de methode 'cloneDeep' van Lodash, afhankelijk van de complexiteit van je object. In sommige gevallen kan deze methode ook nuttig zijn:

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

Voorwaardelijk eigenschappen toevoegen aan objecten

We kunnen voorwaardelijk eigenschappen toevoegen aan een nieuw object dat we maken door gebruik te maken van de spread operator in combinatie met kortsluitingsevaluatie.

const kleuren = {
  rood: '#ff0000',
  groen: '#00ff00',
  blauw: #0000ff
};
const black = {
  zwart: '#000000'
};

laat extraBlack = false;
laat conditionalMerge = {
  ...kleuren,
  ...(extraZwart ? zwart : {})
};

console.log(conditionalMerge);
// {
// rood: '#ff0000',
// groen: '#00ff00',
// blauw: #0000ff
// }

extraBlack = true;
conditionalMerge = {
  ...kleuren,
  ...(extraZwart ? zwart : {})
};

console.log(conditionalMerge);
// {
// rood: '#ff0000',
// groen: '#00ff00',
// blauw: #0000ff
// zwart: '#000000
// }

Een tekenreeks opsplitsen in tekens

Dit is vergelijkbaar met het aanroepen van de methode splitsen met een lege tekenreeks als parameter.

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

Lees meer:

3 veelvoorkomende uitdagingen bij de ontwikkeling van softwareproducten voor starters

Het beste type projecten voor Java

Hoe help je een project niet om zeep met slechte codeerpraktijken?