Si vous désirez plus de contenu francophone comme celui-ci, cliquer Follow ou suivez-moi sur Twitter
Définition
Opérateur Spread : Permet de déconstruire les itérables (tableaux/objets/chaînes) en éléments uniques.
Opérateur Rest: Rassemble tous les éléments restants dans un tableau.
Exemples Spread Operator
const names = ['Mike', 'Paul', 'John']
// Utiliser le spread operator pour déconstruire un tableau
console.log(names) // ['Mike', 'Paul', 'John']
console.log(...names) // Mike Paul John
// Utiliser le spread operator pour modifier/ajouter à un tableau
const newNames = ['Jack', ...names, 'David']
// ['Jack', 'Mike', 'Paul', 'John', 'David']
// Utiliser le spread operator pour copier un tableau
const copyNames = [...names]
// Utiliser le spread operator pour joindre 2 tableaux
const numbers1 = [1, 2, 3]
const numbers2 = [4, 5, 6]
const allNumbers = [...numbers1, ...numbers2]
// Utiliser le spread operator pour les strings également
const name = 'Mike'
const letters = [...name] // ['M', 'i', 'k', 'e']
// Utiliser le spread operator comme paramêtres d'une fonction
numbers = [1, 2, 3]
const sumNumbers = function(num1, num2, num3) {
return num1 + num2 + num3 + num4
}
// sans spread operator
sumNumbers(numbers[0], numbers[1], numbers[2])
// avec spread operator
sumNumbers(...numbers)
// Utiliser le spread operator pour déconstruire les objects
const person = {
firstName: 'Mike',
lastName: 'Taylor'
}
// Utiliser le spread operator pour copier les valeurs d'un object
const newPerson = {...person}
// // Utiliser le spread operator pour étendre un object
const customer = {...person, creditLimit: 1000)
Exemples REST operator
Le REST operator fonctionne selon le même principe que le spread operator mais du côté gauche du '='
Le REST operator permet de déconstuire l'assignation
Le REST operator doit être utiliser comme dernière assignation
Toutes les valeurs non assigné (avant l'ajout du REST) seront envoyé dans le REST
const [num1, num2, ...others] = [1, 2, 3, 4, 5]
console.log(num1, num2, others) // 1, 2, [3, 4, 5]
// Même principe avec les objects
const person = {
firstName: 'Mike',
lastName: 'Taylor',
age = 25
}
const { age, ...personName } = person
// personName va assigner le "rest" des properties non utilisées
console.log(age, personName) // 25, { firstName: 'Mike', lastName: 'Taylor' }
// Utiliser le REST operator pour capter tous les paramètres
const sumNumbers(...numbers) {
console.log(numbers);
}
// Le REST operator va rassembler tous les paramètre dans un tableau
sumNumbers(1, 2) // [1, 2]
sumNumbers(1, 2, 3) // [1, 2, 3]
sumNumbers(1, 2, 3, 4) // [1, 2, 3, 4]
// Utiliser le REST operator pour capter tous les autres paramètres:
const displayText(mainText, option1, option2, option3) {
console.log(mainText, option1, option2, option3)
}
// Exemple, tous les autres paramètres après mainText se retrouverons dans options
const displayText(mainText, ...options) {
console.log(mainText, options)
}
Top comments (0)