2 minutes
Utilisations de l'operateur de Décomposition En Javascript
Dernière mise à jour: 10 juin, 2022L'opérateur de décomposition (spread) peut être utilisé pour rendre tout beaucoup plus facile lorsque vous travaillez avec des tableaux (arrays) et des objets en JavaScript. Les opérations non mutantes peuvent également être effectuées à l'aide de cet opérateur. Lorsqu'une fonction attend zéro ou plusieurs arguments, vous pouvez également utiliser l'opérateur de décomposition.
§Dans Les Tableaux et Les Objets
L'opérateur Spread (...) est couramment utilisé pour concaténer des tableaux ou pour ajouter un élément à un tableau existant. Un exemple très simple pourrait ressembler à ceci :
let nums = [1,2,3,4]
let five = [5]
nums = [...nums, ...five]
console.log(nums) // [ 1, 2, 3, 4, 5 ]
L'utilisation de l'opérateur de décomposition est également très similaire :
let person = { name: "ilker", age: 28 }
let job = { job: "web dev" }
let newPerson = {...person, ...job}
console.log(newPerson) // { name: 'ilker', age: 28, job: 'web dev' }
Dans les cas qui nécessitent des opérations non mutantes, nous pouvons envisager d'utiliser l'opérateur de décomposition. Object.assign() effectuerait une opération de mutation tandis que l'opérateur de propagation ne serait pas en mutation. Disons que j'ai eu 29 ans et que la valeur d'âge dans mon objet doit être mise à jour :
let person = { name: "ilker", age: 28 }
let job = { job: "web dev" }
let newAge = { age: 29 }
let newPerson = {...person, ...newAge, ...job}
console.log(newPerson) // { name: 'ilker', age: 29, job: 'web dev' }
Copier un tableau et créer un clone à l'aide de l'opérateur de décomposition est également possible. Nous pouvons ainsi créer deux tableaux séparés qui occupent deux espaces différents dans la mémoire :
const arr = [1, 2, 3, 4]
const arr2 = [...array]
arrayClone.push(5)
console.log(arr) // [1, 2, 3, 4]
console.log(arr2) // [1, 2, 3, 4, 5]
§Dans La Décomposition de Tableaux
L'opérateur de décomposition peut également être utilisé pour déstructurer un tableau. Disons que nous devons obtenir les premier et deuxième éléments d'un tableau. Normalement, vous obtiendriez le premier et le second de cette façon :
let fruits = ["peach", "apricot", "apple", "pear", "cherry"]
let first = fruits[0]
let second = fruits[1]
console.log(first) // peach
console.log(second) // apricot
Nous pouvons remplacer cette fonctionnalité en utilisant la déstructuration (décomposition) de tableau de cette manière en une seule ligne :
let fruits = ["peach", "apricot", "apple", "pear", "cherry"]
let [ first, second ] = fruits
console.log(first) // peach
console.log(second) // apricot
Comme vous pouvez le voir, la console donne les mêmes résultats. Disons que vous devez obtenir le reste des éléments de ce tableau. Vous n'avez pas besoin de gérer les méthodes de tableau. Vous pouvez simplement utiliser l'opérateur de décomposition de cette façon :
let fruits = ["peach", "apricot", "apple", "pear", "cherry"]
let [ first, second, ...rest ] = fruits
console.log(first) // peach
console.log(second) // apricot
console.log(rest) // [ 'apple', 'pear', 'cherry' ]
Maintenant, le rest récupère tous les éléments restants du tableau. Comme c'était facile !
Cette méthode de déstructuration s'applique aussi aux objets :
const person = { name: 'ilker', age: 28, job: 'web dev' }
const { name, ...rest } = person
console.log(name) // ilker
console.log(rest) // { age: 28, job: 'web dev' }
§Dans Fonctions
L'opérateur de décomposition (spread) s'applique à certains cas extrêmes dans les fonctions. Un exemple fonctionnerait mieux pour les fonctions, je crois:
const func = (a,b,c,d) => {
return [a,b,c,d]
}
const arr = [ 1, 2, 3, 4, 5 ];
console.log(func(...arr)) [ 1, 2, 3, 4 ]
Comme vous pouvez le voir, la fonction n'accepte que les 4 premiers éléments comme arguments et s'exécute sans générer d'erreur. Je suis sûr que vous pouvez trouver quelques cas d'utilisation pour cette méthode d'utilisation de l'opérateur de décomposition.
§Conclusion
J'ai intentionnellement gardé ce post aussi court que possible afin de ne toucher que les parties les plus importantes. Personnellement, je suis fatigué des articles de blog qui prennent trop de temps pour aller à l'essentiel.
L'apprentissage de l'opérateur de propagation m'a beaucoup facilité le travail avec les tableaux et les objets. Il existe de nombreux cas qui nécessitent l'utilisation d'un opérateur de décomposition. La prochaine fois que vous coderez, pensez à l'endroit où vous pouvez utiliser l'opérateur de propagation pour rendre votre code plus propre.
Ilker AkbiyikTable Des Matières
Articles Similaires
