Trois points utiles - le reste et l'écart en JavaScript

Paramètres de repos

La syntaxe restante nous permet de représenter un nombre indéfini d'arguments sous la forme d'un tableau. Examinons une fonction qui additionne tous les arguments passés.

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

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

Syntaxe d'étalement

L'opérateur d'expansion nous permet d'étendre les objets itérables en éléments individuels. Cette fonctionnalité est opposée à celle que nous avons obtenue avec les autres paramètres. Elle peut être appliquée à tous les itérables, tels que les tableaux, les objets, les ensembles, les cartes, etc.

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

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

Trois points dans des cas d'utilisation réels

Copier un tableau

La syntaxe d'étalement va effectivement un niveau plus loin lors de la copie d'un tableau. Un niveau signifie que le premier niveau de références est copié.

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

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

Création d'un tableau d'éléments uniques

Créez un ensemble qui ne stocke que des éléments uniques et convertissez-le en tableau.

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

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

Concaténer des tableaux

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

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

Découpage d'un tableau

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

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

Nous pouvons également retirer n les premiers éléments avec une virgule.

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

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

Insérer un tableau au début d'un autre tableau

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

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

Générer un tableau de nombres de 0 à n

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

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

Déstructurer un objet

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 }

Créer une copie d'un objet

let person = {
  nom : 'John',
  âge : 25,
  portefeuille : {
    somme : 500,
    devise : "USD
  }
} ;
let personCopy = { ...person } ;

console.log(personCopy) ;
// {
// nom : 'John',
// âge : 25,
// portefeuille : {
// somme : 500,
// devise : "USD
// }
// }

Notez que la copie de l'objet qui est créée est un nouvel objet qui possède toutes les propriétés de l'objet original mais aucune de ses informations prototypiques.

personne.âge = 20 ;

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

Notez que la syntaxe de diffusion crée une copie "superficielle" de l'objet, de sorte que la propriété "wallet" sera copiée uniquement en tant que référence au sous-objet d'origine. Pour un clonage en profondeur, vous pouvez utiliser l'approche JSON stringify/parse ou la méthode "cloneDeep" fournie par Lodash, en fonction de la complexité de votre objet. Dans certains cas, cette méthode peut également s'avérer utile :

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

Ajout conditionnel de propriétés aux objets

Nous pouvons ajouter de manière conditionnelle des propriétés à un nouvel objet que nous créons en utilisant l'opérateur d'étalement ainsi que l'évaluation de court-circuit.

const colors = {
  red : '#ff0000',
  vert : '#00ff00',
  bleu : '#0000ff'
} ;
const black = {
  noir : '#000000'
} ;

let extraBlack = false ;
let conditionalMerge = {
  ... couleurs,
  ...(extraNoir ? noir : {})
} ;

console.log(conditionalMerge) ;
// {
// red : '#ff0000',
// vert : '#00ff00',
// bleu : '#0000ff'
// }

extraBlack = true ;
conditionalMerge = {
  ...couleurs,
  ...(extraNoir ? noir : {})
} ;

console.log(conditionalMerge) ;
// {
// red : '#ff0000',
// vert : '#00ff00',
// bleu : '#0000ff'
// noir : "#000000
// }

Découpage d'une chaîne en caractères

Cela revient à appeler la méthode "split" avec une chaîne vide comme paramètre.

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

En savoir plus :

3 défis communs au développement de produits logiciels pour les startups

Le meilleur type de projets pour Java

Comment ne pas tuer un projet avec de mauvaises pratiques de codage ?