¿Explicación de [].slice.call en javascript?
Me topé con este sencillo atajo para convertir una lista de nodos DOM en una matriz normal, pero debo admitir que no entiendo completamente cómo funciona:
[].slice.call(document.querySelectorAll('a'), 0)
Entonces comienza con una matriz vacía [], luego slicese usa para convertir el resultado callen una nueva matriz, ¿no?
Lo que no entiendo es el call. ¿ Cómo se convierte eso document.querySelectorAll('a')de una NodeList a una matriz normal?
Lo que sucede aquí es que llamas slice()como si fuera una función de NodeListusar call(). Lo que slice()hace en este caso es crear una matriz vacía, luego iterar a través del objeto en el que se está ejecutando (originalmente una matriz, ahora a NodeList) y seguir agregando los elementos de ese objeto a la matriz vacía que creó, que finalmente se devuelve. Aquí hay un artículo sobre esto .
EDITAR:
Entonces comienza con una matriz vacía [], luego se usa un segmento para convertir el resultado de la llamada en una nueva matriz, ¿no?
Eso no está bien. [].slicedevuelve un objeto de función. Un objeto de función tiene una función call()que llama a la función asignando el primer parámetro de call()to this; en otras palabras, hacer que la función piense que se llama desde el parámetro (el NodeListdevuelto por document.querySelectorAll('a')) en lugar de desde una matriz.
En JavaScript, los métodos de un objeto se pueden vincular a otro objeto en tiempo de ejecución. En resumen, javascript permite que un objeto "tome prestado" el método de otro objeto:
object1 = {
name: 'Frank',
greet() {
alert(`Hello ${this.name}`);
}
};
object2 = {
name: 'Andy'
};
// Note that object2 has no greet method,
// but we may "borrow" from object1:
object1.greet.call(object2); // Will show an alert with 'Hello Andy'
Los métodos cally applyde los objetos de función (en JavaScript, las funciones también son objetos) le permiten hacer esto. Entonces, en su código podría decir que NodeList está tomando prestado el método de corte de una matriz. .slice()devuelve otra matriz como resultado, que se convertirá en la matriz "convertida" que luego podrá usar.
Recupera la slicefunción de un Array. Luego llama a esa función, pero utiliza el resultado de document.querySelectorAllcomo thisobjeto en lugar de una matriz real.
Es una técnica para convertir objetos similares a matrices en matrices reales.
Algunos de estos objetos incluyen:
argumentsen funciones- NodeList (recuerde que su contenido puede cambiar después de ser recuperado, por lo que convertirlos en una matriz es una forma de congelarlos)
- Colecciones jQuery, también conocidas como objetos jQuery (algunos documentos: API , tipo , aprendizaje )
Esto sirve para muchos propósitos, por ejemplo, los objetos se pasan por referencia, mientras que las matrices se pasan por valor.
Además, tenga en cuenta que el primer argumento 0se puede omitir; se explica detalladamente aquí .
Y para completar, también existe jQuery.makeArray() .
