0
185
ViewsJS: no hay contenido en la matriz de la clase principal
Estoy usando dos clases en javascript.
Reto de clase y Módulos de clase, que amplía Reto.
en Challenge tengo este constructor:
constructor() { this.handles = []; }y este método:
bla() { let elmnts = document.querySelectorAll("p"); // 5x for(let i=0; i < elmnts.length; i++) { let elmnt = elmnts[i]; this.handles[elmnt['id']] = elmnt; // saves the handles to each element in separate array for later use } }en la Clase secundaria estoy tratando de usar esta matriz "this.handles", pero siempre está vacía.
No está "indefinido", pero es una matriz vacía como la definí en el constructor. es como si las entradas nunca se hubieran configurado... pero lo están (como muestra console.log(), cuando lo inserto directamente después del bucle for())
console.log(this.handles); // --> []¿Por qué pasó esto?
2 answers
Answer question0
this.handles es una matriz. Entonces, cuando está haciendo this.handles[elmnt['id']] , elmnt['id'] devuelve una cadena, mientras que una matriz espera un entero (positivo) para el índice. Entonces los elementos no están establecidos en la matriz.
¿Quizás quisiste decir que this.handles es un objeto?
class Ex1 { constructor() { this.handles = {}; } bla() { let elmnts = document.querySelectorAll("p"); // 5x for (let i = 0; i < elmnts.length; i++) { let elmnt = elmnts[i]; this.handles[elmnt['id']] = elmnt; // saves the handles to each element in separate array for later use } } } class Ex2 extends Ex1 { constructor(){ super(); } m1(){ console.log(this.handles); } } let p1 = new Ex2(); p1.m1(); p1.bla(); p1.m1(); <p id="one">1</p> <p id="two">2</p> <p id="three">3</p> <p id="four">4</p> <p id="five">5</p>0
Necesitas entender las siguientes cosas:
En JavaScript...
- ... Las matrices siempre están basadas en índices (0 apuntando al primer elemento de la matriz).
- ... agrega elementos a una matriz usando
arr.push(el). - ... Las matrices también son objetos, por lo que agregar propiedades arbitrarias también funciona (que es lo que está haciendo al usar la identificación del elemento
pcomo clave y asignarle la referencia del elemento). Mira este ejemplo:
Si necesita una matriz (que conserva el orden y se puede iterar fácilmente más adelante), simplemente distribuya la NodeList que obtuvo de querySelectorAll('p') en la matriz utilizando la sintaxis de distribución de ES6 ... :
this.handles = [...document.querySelectorAll("p")];