mdn - splice javascript string

Explicación de[].slice.call en javascript?

Question

Tropecé con este sencillo atajo para convertir una DOM NodeList 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 se usa slice para convertir el resultado de la call a una nueva matriz, ¿sí?

El bit que no entiendo es la call . ¿Cómo convierte eso document.querySelectorAll(''a'') de una NodeList a una matriz normal?

Answer 1

¿Cómo convierte eso document.querySelectorAll(''a'') de una NodeList a una matriz normal?

Este es el código que tenemos,

[].slice.call(document.querySelectorAll(''a''), 0)

Desmantelemos primero,

 [] // Array object
.slice // Accessing the function ''slice'' present in the prototype of Array
.call // Accessing the function ''call'' present in the prototype of function object(slice)
(document.querySelectorAll(''a''),0)
// ''call'' can have arguments like, (thisArg, arg1,arg2...n).
// So here we are passing the ''thisArg'' as an array like object,
// that is a ''nodeList''. It will be served as ''this'' object inside of slice function.
// And finally setting ''start'' argument of slice as ''0'' and leaving the ''end''
// argument as ''undefined''

Paso: 1 Ejecución de la función de call

• Dentro de la call , que no sea el thisArg , el resto de los argumentos se anexarán a una lista de argumentos.
• Ahora la slice función se invocará al enlazar su valor como thisArg (el objeto parecido a una matriz vino de document.querySelector ) y con la lista de argumentos. es decir,] start argumento que contiene 0

Paso: 2 Ejecución de la función de slice invocada dentro de la call

• start se asignará a una variable s como 0
• ya que el end undefined está undefined , this.length se almacenará en e
• una matriz vacía se almacenará en una variable a

• Después de realizar las configuraciones anteriores, se realizará la siguiente iteración

  while(s < e) {
  a.push(this[s]);
  s++;
  }

• la matriz llena a se devolverá como resultado.

PD. Para una mejor comprensión de nuestro escenario, algunos pasos que son necesarios para nuestro contexto han sido ignorados del algoritmo original de call y slice .

Answer 2

Desde ES6: simplemente haz una matriz con Array.from (element.children) o Array.from ({length: 5})

Answer 3

En javascript, los métodos de un objeto pueden vincularse 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:function(){
alert(''hello ''+this.name)
}
};
object2 = {
name:''andy''
};
// Note that object2 has no greet method.
// But we may "borrow" from object1:
object1.greet.call(object2);

Los métodos de call y apply de objetos de función (en las funciones de JavaScript también son objetos) le permiten hacer esto. Entonces, en su código podría decir que la Nodelist está tomando prestado el método de corte de una matriz. Lo que hace la conversión es el hecho de que slice devuelve otra matriz como resultado.

Answer 4

Es una técnica para convertir objetos tipo array a matrices reales.

Algunos de estos objetos incluyen:

• arguments en funciones
• NodeList (recuerde que su contenido puede cambiar después de ser capturado, así que convertirlos a una matriz es una forma de congelarlos)
• Colecciones jQuery, también conocidos como objetos jQuery (algunos documentos: API , type , learn )

Esto sirve para muchos propósitos, por ejemplo, los objetos se pasan por referencia mientras que los conjuntos se pasan por valor.

Además, tenga en cuenta que el primer argumento 0 se puede omitir, aquí encontrará una explicación detallada .

Y para completar, también hay jQuery.makeArray() .

Answer 5

Lo que sucede aquí es que llama a slice() como si fuera una función de NodeList usando 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 ejecuta (originalmente una matriz, ahora una 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 slice para convertir el resultado de la llamada a una nueva matriz, ¿sí?

Eso no está bien. [].slice devuelve un objeto de función. Un objeto de función tiene una call() función call() que llama a la función que asigna el primer parámetro de la call() a this ; en otras palabras, hacer que la función crea que se está llamando desde el parámetro (la NodeList devuelta por document.querySelectorAll(''a'') ) en lugar de desde una matriz.

Answer 6

Recupera la función de slice de una Array . Luego llama a esa función, pero usa el resultado de document.querySelectorAll como this objeto en lugar de una matriz real.

Answer 7

[].slice.call(document.querySelectorAll(''.slide''));
1. The querySelectorAll() method returns all elements in the document that matches a specified selector(s).
2. The call() method calls a function with a given this value and arguments provided individually.
3. The slice() method returns the selected elements in an array, as a new array object.
so this line return the array of [object HTMLDivElement]. Here is the six div with classname "slide" so array length will be 6.
<div class="slideshow">
<div class="slide">
first slider1
</div>
<div class="slide">
first slider2
</div>
<div class="slide">
first slider3
</div>
<div class="slide">
first slider4
</div>
<div class="slide">
first slider5
</div>
<div class="slide">
first slider6
</div>
</div>
<script type="text/javascript">
var arraylist = [].slice.call(document.querySelectorAll(''.slide''));
alert(arraylist);
</script>