...(tre punti in Javascript) si chiama Spread Syntax o Spread Operator. Ciò consente di espandere un iterabile come un'espressione di matrice o una stringa o un oggetto espressione di ovunque venga posizionata. Questo non è specifico di React. È un operatore Javascript.
Tutte queste risposte qui sono utili, ma voglio elencare i casi d'uso più utilizzati della sintassi diffusa (Operatore di diffusione).
1. Combine array (array concatenati)
Esistono diversi modi per combinare le matrici , ma l'operatore di diffusione consente di posizionarle in qualsiasi punto di una matrice. Se desideri combinare due array e posizionare elementi in qualsiasi punto all'interno dell'array, puoi fare come segue:
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. Copia di array
Quando volevamo una copia di un array, avevamo il metodo Array.prototypr.slice () . Ma puoi fare lo stesso con l'operatore di diffusione.
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3. Chiamare le funzioni senza applicare
In ES5, per passare un array di due numeri alla doStuff()funzione, si utilizza spesso il metodo Function.prototype.apply () come segue:
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
Tuttavia, utilizzando l'operatore spread, è possibile passare un array nella funzione.
doStuff(...args);
4. Matrici di distruzione
Puoi usare la destrutturazione e l'operatore di riposo insieme per estrarre le informazioni in variabili come preferisci:
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. Argomenti delle funzioni come parametri di riposo
ES6 ha anche i tre punti (...) che è un parametro di riposo che raccoglie tutti gli argomenti rimanenti di una funzione in un array.
function f(a, b, ...args) {
console.log(args);
}
f(1,2,3,4,5);
// [ 3, 4, 5 ]
6. Utilizzo delle funzioni matematiche
Qualsiasi funzione in cui spread viene utilizzato come argomento può essere utilizzata da funzioni che possono accettare un numero qualsiasi di argomenti.
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. Combinazione di due oggetti
È possibile utilizzare l'operatore diffusione per combinare due oggetti. Questo è un modo semplice e pulito per farlo.
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. Separare una stringa in caratteri separati
È possibile utilizzare l'operatore spread per distribuire una stringa in caratteri separati.
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
Puoi pensare a più modi per utilizzare Spread Operator. Quello che ho elencato qui sono i casi d'uso più comuni.