...(tres puntos en Javascript) se llama Spread Sintaxis u Spread Operator. Esto permite expandir una iteración como una expresión de matriz o cadena o una expresión de objeto donde sea que se coloque. Esto no es específico de React. Es un operador de Javascript.
Todas estas respuestas aquí son útiles, pero quiero enumerar los casos de uso prácticos más utilizados de la sintaxis Spread (Spread Operator).
1. Combinar matrices (concatenar matrices)
Hay una variedad de formas de combinar matrices , pero el operador de propagación le permite colocar esto en cualquier lugar de una matriz. Si desea combinar dos matrices y colocar elementos en cualquier punto dentro de la matriz, puede hacer lo siguiente:
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. Copiar matrices
Cuando queríamos una copia de una matriz, solíamos tener el método Array.prototypr.slice () . Pero, puede hacer lo mismo con el operador de propagación.
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3. Funciones de llamada sin aplicar
En ES5, para pasar una matriz de dos números a la doStuff()función, a menudo utiliza el método Function.prototype.apply () de la siguiente manera:
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
Sin embargo, al usar el operador de propagación, puede pasar una matriz a la función.
doStuff(...args);
4. Matrices de desestructuración
Puede usar la desestructuración y el operador de descanso juntos para extraer la información en variables como desee:
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. Argumentos de funciones como parámetros de descanso
ES6 también tiene los tres puntos (...), que es un parámetro de reposo que recopila todos los argumentos restantes de una función en una matriz.
function f(a, b, ...args) {
console.log(args);
}
f(1,2,3,4,5);
// [ 3, 4, 5 ]
6. Usando funciones matemáticas
Cualquier función donde se use spread como argumento puede ser utilizada por funciones que pueden aceptar cualquier número de argumentos.
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. Combinando dos objetos
Puede usar el operador de propagación para combinar dos objetos. Esta es una manera fácil y limpia de hacerlo.
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. Separar una cadena en caracteres separados
Puede usar el operador de propagación para extender una cadena en caracteres separados.
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
Puede pensar en más formas de utilizar el Operador de propagación. Lo que he enumerado aquí son los casos de uso más populares.