Tre punti utili: il resto e lo spread in JavaScript

Parametri di riposo

La sintassi del resto ci permette di rappresentare un numero indefinito di argomenti come un array. Osserviamo una funzione che somma tutti gli argomenti passati.

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

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

Sintassi di diffusione

L'operatore spread ci consente di espandere gli oggetti iterabili in singoli elementi. Questa funzionalità è opposta a quella ottenuta con i parametri restanti. Può essere applicato a tutte le iterabili, come array, oggetti, set, mappe, ecc.

const somma = (x, y, z) => x + y + z;
numeri costanti = [1, 2, 3];

console.log(somma(...numeri)); // 6

Tre punti in casi d'uso reali

Copia di un array

La sintassi di spread si spinge effettivamente a un livello superiore durante la copia di un array. Un livello significa che viene copiato il primo livello di riferimenti.

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

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

Creare un array di elementi unici

Creare un set che memorizzi solo elementi unici e convertirlo in un array.

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

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

Concatenare gli array

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

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

Affettare un array

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

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

Possiamo anche rimuovere n primi elementi con la virgola.

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

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

Inserimento di un array all'inizio di un altro array

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

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

Generare un array di numeri da 0 a n

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

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

Destrutturazione di un oggetto

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 }

Creare una copia di un oggetto

let person = {
  nome: 'John',
  età: 25,
  portafoglio: {
    somma: 500,
    valuta: 'USD'
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
// nome: 'John',
// età: 25,
// portafoglio: {
// somma: 500,
// valuta: 'USD'
// }
// }

Si noti che la copia dell'oggetto che viene creata è un nuovo oggetto con tutte le proprietà dell'oggetto originale, ma nessuna delle sue informazioni prototipali.

persona.età = 20;

console.log(persona.età); // 20
console.log(personCopy.age); // 25

Si noti che la sintassi diffusa crea una copia "superficiale" dell'oggetto, quindi la proprietà "portafoglio" sarà copiata solo come riferimento al sotto-oggetto originale. Per la clonazione profonda si può usare l'approccio JSON stringify/parse o il metodo 'cloneDeep' fornito da Lodash, a seconda della complessità dell'oggetto. In alcuni casi anche questo metodo può essere utile:

let personCopy = { ...persona, portafoglio = {...persona.portafoglio}}; 

Aggiungere condizionatamente proprietà agli oggetti

Possiamo aggiungere in modo condizionato le proprietà a un nuovo oggetto che stiamo creando, utilizzando l'operatore di diffusione e la valutazione del cortocircuito.

const colori = {
  rosso: '#ff0000',
  verde: '#00ff00',
  blu: '#0000ff'
};
const nero = {
  nero: '#000000'
};

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

console.log(conditionalMerge);
// {
// rosso: '#ff0000',
// verde: '#00ff00',
// blu: '#0000ff'
// }

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

console.log(conditionalMerge);
// {
// rosso: '#ff0000',
// verde: '#00ff00',
// blu: '#0000ff'
// nero: '#000000'
// }

Dividere una stringa in caratteri

Questo è simile alla chiamata del metodo split con una stringa vuota come parametro.

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

Per saperne di più:

3 sfide comuni dello sviluppo di prodotti software per le startup

Il miglior tipo di progetti per Java

Come non uccidere un progetto con cattive pratiche di codifica?