...(trois points en Javascript) s'appelle la Spread Syntax ou Spread Operator. Cela permet à un itérable comme une expression de tableau ou une chaîne d'être développé ou une expression d' objet d'être développé où qu'il soit placé. Ce n'est pas spécifique à React. Il s'agit d'un opérateur Javascript.
Toutes ces réponses ici sont utiles, mais je veux énumérer les cas d'utilisation pratiques les plus utilisés de la syntaxe Spread (Spread Operator).
1. Combiner des tableaux (Concaténer des tableaux)
Il existe différentes manières de combiner des tableaux , mais l'opérateur d'étalement vous permet de le placer à n'importe quel endroit d'un tableau. Si vous souhaitez combiner deux tableaux et placer des éléments à n'importe quel point du tableau, vous pouvez procéder comme suit:
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. Copie de tableaux
Lorsque nous voulions une copie d'un tableau, nous avions la méthode Array.prototypr.slice () . Mais, vous pouvez faire de même avec l'opérateur de propagation.
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3. Fonctions d'appel sans appliquer
Dans ES5, pour transmettre un tableau de deux nombres à la doStuff()fonction, vous utilisez souvent la méthode Function.prototype.apply () comme suit:
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
Cependant, en utilisant l'opérateur d'étalement, vous pouvez passer un tableau dans la fonction.
doStuff(...args);
4. Tableaux de déstructuration
Vous pouvez utiliser la déstructuration et l'opérateur de repos ensemble pour extraire les informations en variables comme vous le souhaitez:
let { 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 }
5. Arguments de fonction comme paramètres de repos
ES6 a également les trois points (...) qui est un paramètre de repos qui collecte tous les arguments restants d'une fonction dans un tableau.
function f(a, b, ...args) {
console.log(args);
}
f(1,2,3,4,5);
// [ 3, 4, 5 ]
6. Utilisation des fonctions mathématiques
N'importe quelle fonction où spread est utilisé comme argument peut être utilisée par des fonctions qui peuvent accepter n'importe quel nombre d'arguments.
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. Combiner deux objets
Vous pouvez utiliser l'opérateur d'étalement pour combiner deux objets. C'est une façon simple et plus propre de le faire.
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. Séparez une chaîne en caractères séparés
Vous pouvez utiliser l'opérateur d'étalement pour étaler une chaîne en caractères séparés.
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
Vous pouvez penser à d'autres façons d'utiliser l'opérateur Spread. Ce que j'ai énuméré ici, ce sont les cas d'utilisation les plus courants.