Imitare la struttura di un object di arrays javascript

Quindi sono stato interessato a utilizzare la function splice sul mio object HTMLCollection.

<html> <head> <title>Collections</title> </head> <body> <div id="list"> <div style="background-color:lightblue">item1</div> <div>item2</div> <div style="background-color:lightblue">item3</div> </div> <button onclick="BtnColourItem2_Click()">Colour Item2</button> 

Consente di assumere che l'elenco sia stato generato da una lingua del server come ASP.Net

 function BtnRemoveItem2_Click() { var list = document.getElementById("list"); list[1].style.backgroundColor = "LightBlue" //list.splice(1,1)//goal colour the second item and recolour the others to white for(var item in list) list[item].style.backgroundColor = "white"; } 

Ora, se fosse una matrix, esisterebbe il metodo di splice e potrei usare questo metodo.

nota: ho realizzato la funzionalità spingendo i div divisi in una matrix effettiva per unire quello non necessario.

Ho provato questo:

 list.trunc = [].splice; list.trunc(1, 1); for(item in list) console.log(item.innerText); //results were //item1 //item2 //item3 

Non mi ha dato errori ma non ho funzionato. Così ho gettato questo insieme:

 newList = new Object(); newList.trunc = [].splice; newList.push = [].push; newList.push(list[0].innerText); newList.push(list[1].innerText); newList.push(list[2].innerText); newList.splice(1,1); console.log(newList); //outputs { 0 : "item1" , 1 : "item3"} 

Ho trovato che abbastanza freddo. Quindi questa è la mia domanda. Come è ansible strutturare un object abbastanza in grado di far funzionare la function splice senza bisogno di utilizzare la spinta oi methods utilizzati per immettere gli elementi di Array?

La maggior parte del tempo, la cosa più semplice da fare con un object di tipo arrays quando si desidera che la funzionalità effettiva dell'arrays sia call slice() su di esso per creare un arrays:

 var arrays = Array.prototype.slice.call(arraysLikeObject); 

Una volta fatto questo, avrai una matrix effettiva e puoi fare tutto ciò che vuoi con esso.

Non è ansible aggiungere o rimuovere elementi su un HTMLCollection effettivo. Non consente la modifica in questo modo e per questo motivo la chiamata a splice() non funziona. Ma se si crea un arrays da esso come mostrato in precedenza, è ansible modificare l'arrays come necessario.

Come sottolinea Paul S. nei commenti, un HTMLCollection è "live" ed è aggiornato dynamicmente per riflettere lo stato attuale del DOM. Ecco perché non puoi cambiarlo manualmente. Se lo metti in un arrays, l'arrays non aggiornerà in modo dinamico per accogliere le modifiche DOM, ma la maggior parte del tempo penso che uno vorrebbe che una matrix rimanga ferma e non cambia sotto il naso.

Trovato. Grazie @Paul S Sembra che Jscript permetterà la chiamata della function splice su un object. Ho provato prima questo:

 var obj = new Object(); obj[0] = "item1"; obj[1] = "item2"; obj[2] = "item3"; obj.trunc = [].splice; obj.trunc(1,1); console.log(obj); //outputs //Object {0: "item1", 1: "item2", 2: "item3", trunc: function} 

ma non ho aggiunto la properties; di lunghezza, quindi aggiungendo al codice qui sopra:

 var countNum = 0; for (var item in obj) !isNaN(parseFloat(item)? countNum++ : ""; obj.length = countNum;//number of num-indexed properties obj.trunc(1,1); console.log(obj); //outputs //Object {0: "item1", 1: "item3", trunc: function} 

finché la struttura è indice di numero e ha una properties; di lunghezza la function splice functionrà su di esso.

Di conseguenza, la struttura dei dati di una matrix in javascript è affidata alle properties;:

  • numero indice
  • lunghezza