1. Significado
1. Convierta una matriz en una secuencia de parámetros separados por comas.
Tenga en cuenta que solo cuando se llama a la función, el operador de propagación se puede colocar entre paréntesis; de lo contrario, se informará un error.
console.log(...[1, 2, 3])
// 1 2 3
console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
2. Este operador se utiliza principalmente para llamadas a funciones . Este operador convierte una matriz en una secuencia de argumentos.
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
2. El método apply() de la función alternativa
apply() en detalle
Función: El método apply() llama a una función con un valor this dado y los parámetros proporcionados como una matriz (u objeto similar a una matriz).
Parámetros: Hay 2 parámetros en total, los cuales son opcionales.
El primer parámetro:
apunta a. (Este puede no ser el valor real visto por este método: si esta función está en modo no estricto, cuando se especifica como nulo o indefinido, se reemplazará automáticamente con un puntero al objeto global y el valor original ser envuelto.) El segundo parámetro:
una
matriz o un objeto similar a una matriz. (Los elementos de la matriz se pasarán a la función func como parámetros separados. Si el valor del parámetro es nulo o indefinido, significa que no es necesario pasar ningún parámetro). Si no se pasan parámetros: es una variable
global
Dado que el operador de dispersión puede expandir matrices, el método apply() ya no es necesario para convertir matrices en parámetros de funciones.
// ES5 的写法
Math.max.apply(null, [14, 3, 77])
// ES6 的写法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);
3. Aplicación del operador de propagación
(1) Copie la matriz
Una matriz es un tipo de datos compuesto. Si lo copia directamente, simplemente copia el puntero a la estructura de datos subyacente en lugar de clonar una nueva matriz.
Una matriz es un tipo de datos compuesto. Si lo copia directamente, simplemente copia el puntero a la estructura de datos subyacente en lugar de clonar una nueva matriz.
const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]
En el código anterior, a2 no es un clon de a1, sino otro puntero que apunta a los mismos datos. La modificación de a2 conducirá directamente al cambio de a1.
ES5 solo puede usar soluciones alternativas para copiar matrices.
const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]
En el código anterior, a1 devolverá un clon de la matriz original y la modificación de a2 no afectará a a1.
El operador de extensión proporciona una forma conveniente de copiar una matriz.
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
En las dos formas de escritura anteriores, a2 es un clon de a1.
(2) Fusionar matrices
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
Sin embargo, estos dos métodos son copias superficiales y debe prestar atención al usarlos.
const a1 = [{
foo: 1 }];
const a2 = [{
bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
a3[0] === a1[0] // true
a4[0] === a1[0] // true
En el código anterior, a3 y a4 son matrices nuevas fusionadas por dos métodos diferentes, pero todos sus miembros son referencias a los miembros originales de la matriz, que es una copia superficial. Si se modifica el valor al que apunta la referencia, se reflejará en la nueva matriz de forma síncrona.
(3) Combinado con asignación de desestructuración
El operador de dispersión se puede combinar con la asignación de desestructuración para generar matrices.
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
Si se utiliza el operador de dispersión para la asignación de matrices, solo se puede colocar en la última posición del parámetro; de lo contrario, se informará un error.
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
(4) cadena
El operador de propagación también puede convertir cadenas en matrices reales.
[...'hello']
// [ "h", "e", "l", "l", "o" ]
Los caracteres Unicode de cuatro bytes se reconocen correctamente.
JavaScript reconoce los caracteres Unicode de cuatro bytes como dos caracteres y no existe ese problema con el operador de propagación. Por lo tanto, una función que devuelve correctamente la longitud de una cadena se puede escribir de la siguiente manera.
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
function length(str) {
return [...str].length;
}
length('x\uD83D\uDE80y') // 3
(5) Objetos que implementan la interfaz Iterator