L'opérateur de propagation JavaScript

Apprenez les bases de l'opérateur JavaScript Spread

Vous pouvez développer un tableau, un objet ou une chaîne à l'aide de l'opérateur d'étalement....

Commençons par un exemple de tableau. Donné

const a = [1, 2, 3]

vous pouvez créer un nouveau tableau en utilisant

const b = [...a, 4, 5, 6]

Vous pouvez également créer une copie d'un tableau en utilisant

const c = [...a]

Cela fonctionne également pour les objets. Cloner un objet avec:

const newObj = { ...oldObj }

À l'aide de chaînes, l'opérateur de diffusion crée un tableau avec chaque caractère de la chaîne:

const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']

Cet opérateur a des applications très utiles. Le plus important est la possibilité d'utiliser un tableau comme argument de fonction d'une manière très simple:

const f = (foo, bar) => {}
const a = [1, 2]
f(...a)

Leélément de reposest utile lorsque vous travaillez avecdéstructuration du tableau:

const numbers = [1, 2, 3, 4, 5]
const [first, second, ...others] = numbers

etéléments étalés:

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const result = sum(...numbers)

ES2018 introduit des propriétés de repos, qui sont les mêmes mais pour les objets.

Propriétés de repos:

const { first, second, ...others } = {
  first: 1,
  second: 2,
  third: 3,
  fourth: 4,
  fifth: 5
}

first // 1 second // 2 others // { third: 3, fourth: 4, fifth: 5 }

Propriétés de propagationpermettent de créer un nouvel objet en combinant les propriétés de l'objet passées après l'opérateur d'étalement:

const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

C'est également le moyen idéal pour fusionner deux objets simples en un seul:

const object1 = {
  name: 'Flavio'
}

const object2 = { age: 35 }

const object3 = {…object1, …object2 }

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: