Come rimuovere un oggetto dall'array usando spilce?

Question

Recentemente ho posto una domanda su ( come rimuovere un elemento dall'array in javascript senza crearne uno nuovo? ).

b1 = document.getElementById('b1')
b2 = document.getElementById('b2')
myArray = [b1 , b2];

Ora devo usare questo array due volte una volta che ho bisogno di scegliere un elemento casuale da esso e applicare alcune proprietà su di esso e in secondo luogo ho bisogno di far apparire l'elemento che ho applicato le proprietà. Inoltre è un lungo elenco di elementi nell'array, quindi non conosco i loro numeri di indice.

Per una migliore spiegazione

blocks = [document.getElementById("b1"),document.getElementById("b2"),document.getElementById("b3"),document.getElementById("b4"),document.getElementById("b5"),document.getElementById("b6"),document.getElementById("b7"),document.getElementById("b8"),document.getElementById("b9")]

//first use
function autoChance(){
    const randomBlock = blocks[Math.floor(Math.random() * blocks.length)];
    randomBlock.style.backgroundColor='blue';
}

//second use
function b1Click(){
    b1.style.backgroundColor="red"
    const index = blocks.indexOf('document.getElementById("b2")');
    blocks.splice(index, 1);
    console.log(blocks)
    autoChance()
}

//If u see in console its removing the last item

.blocks{
    width: 310px;
    height: 304px;
    overflow-wrap: normal;
    background-color: aqua;
}
#b1,#b2,#b3,#b4,#b5,#b6,#b7,#b8,#b9{
    width: 100px;
    height: 100px;
    position: relative;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="blocks">
        <button id="b1" onclick="b1Click()"></button>
        <button id="b2" onclick="b2Click()"></button>
        <button id="b3" onclick="b3Click()"></button>
        <button id="b4" onclick="b4Click()"></button>
        <button id="b5" onclick="b5Click()"></button>
        <button id="b6" onclick="b6Click()"></button>
        <button id="b7" onclick="b7Click()"></button>
        <button id="b8" onclick="b8Click()"></button>
        <button id="b9" onclick="b9Click()"></button>
    </div>
    <script src="script.js"></script>
</body>
</html>

Answer 1

Come ho detto nel mio commento su quell'altra domanda , non importa cosa stai cercando, indexOflo troverai se passi la stessa cosa indexOfnell'array; indexOffa efficacemente un ===confronto.

Ora, se vuoi trovare l'indice di un oggetto controllandone le proprietà, o una stringa usando una sottostringa, o qualsiasi cosa che non sia solo un ===confronto, dovresti usare findIndexcon un callback (o findper trovare l'oggetto stesso).

Come posso rimuoverli dall'array usando i valori ...

Allo stesso modo: splicecon l'indice della voce (se vuoi mantenere lo stesso array) o filter(se vuoi creare un nuovo array).

Answer 2

Controlla questo snippet. Quando selezioni elementi usando metodi come getElementsByTagName, potrebbe non restituire array. Potrebbe essere una raccolta HTML o un oggetto a seconda del metodo scelto.

Come puoi vedere (in console), initiallyè un file object. Per cambiarlo in un array, guarda come ho inizializzato elements, l'uso del [... ]resto del codice è facile da capire. Fammi sapere se rimani bloccato :)

var initially = document.getElementsByTagName('div')

console.log(typeof(initially));

var elements = [...initially];

console.log(elements);

var toSearch = document.querySelector('.four');
var ind = elements.indexOf(toSearch);
elements.splice(ind, 1);

console.log(elements);

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>

Answer 3

Otterrei un numero casuale basato sulla lunghezza del tuo array di elementi e poi unirei l'array in base a quel numero e restituire il valore da quella giunzione. Quel valore, tuttavia, sarà in un array, quindi dovrò restituire il primo indice di quell'array.

var myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function removeElement() {
  let randomIndex = randomize(myArray.length);
  let randomValueArr = myArray.splice(randomIndex, 1);
  let randomValue = randomValueArr[0];
  
  console.log(randomValue);
  
  return randomValue;
}

function randomize(max, min = 0) {
  return Math.floor(Math.random() * max + min)
}

<button onclick="removeElement()">Click me to remove elements</button>