Prefacio
js hay muchos conceptos más difíciles de entender, como el prototipo js y la herencia . He visto desde el principio prototipos de conocimiento de js, y en ese momento escribí un blog como registro, está claro que en ese momento solo lo escribía de memoria. Recientemente usé el tiempo libre para algunos js relativamente más profundos para volver a aprender el concepto y el uso, y crear un javascript de profundidad de columna para grabar y compartir. ¿Por qué hacer lo siguiente para analizar la [].slice.call()lata NodeListen la matriz ?
concepto
Algunos conceptos deben entenderse antes del análisis:
Las pseudo-matrices también se denominan clases-matrices. No pueden llamar directamente a métodos de matriz ni esperar ningún comportamiento especial de la propiedad de longitud, pero aún pueden atravesarse utilizando métodos de recorrido de matriz real. Por lo general, el parámetro de argumentos de la función, así como los objetos NodeList devueltos al llamar a querySelectorAll, son todos pseudoarreglos.
Una matriz de slicegramática básica es array.slice(start, end)un uso más específico mucho que decir, con el siguiente fragmento de código para explorar su comportamiento predeterminado:
const arr = [1, 2, 3, 4, 5]
arr.slice(0, arr.length) // [1, 2, 3, 4, 5]
arr.slice() // [1, 2, 3, 4, 5]
Como se puede ver en el resultado del código anterior, el slicevalor predeterminado del parámetro de inicio del método es 0 , y el valor predeterminado del parámetro final es la longitud del llamador del segmento .
Implementar un método de corte simple
<ul>
<li>F</li>
<li>O</li>
<li>O</li>
</ul>
<script>
Array.prototype.slice2 = function (start = 0, end = this.length) {
console.log(`打印看看当前的 this： ${
this}`) // [object NodeList]
const result = []
for (let i = start; i < end; i++) {
result.push(this[i])
}
return result
};
// 试一试效果
const nodeArr = [].slice2.call(document.querySelectorAll('li')) // [li, li, li]
const nodeArr2 = [].slice2.call(document.querySelectorAll('li'), 0, 2) // [li, li]
</script>
La sección mencionada anteriormente describe que la matriz ficticia puede forcircular, en el código anterior, definimos el punto de inicio de inicio y el punto final END estará dentro de un rango especificado, elemento secundario NodeListpush en una nueva matriz, de modo que la conversión de matriz ficticia es hecho Array. Es una operación de lengthcambio de atributo en el número de elementos de la matriz, los diversos métodos se pueden utilizar en la matriz.
para resumir
[] .slice2.call (NodeList) el NodeListmétodo utilizado en una matriz de al menos varias veces en mi carrera, pero tengo que buscar casi todas las veces antes de querer utilizarlo, obteniendo el resultado de la finalización del proyecto apresuradamente, no significa nada. Pero realmente cálmate para explorar sus principios y descubrí que era tan simple. Aunque hay una manera más fácil de NodeListingresar a una matriz [...document.querySelectorAll('li')], tómate el tiempo para mirar en profundidad js algo realmente interesante.