¿Cómo eliminar un objeto de la matriz usando spilce?

Question

Recientemente hice una pregunta sobre ( ¿Cómo eliminar un elemento de la matriz en javascript sin crear uno nuevo? ).

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

Ahora tengo que usar esta matriz dos veces una vez que necesito elegir un elemento aleatorio y aplicarle algunas propiedades y, en segundo lugar, necesito hacer estallar el elemento que he aplicado propiedades. También es una larga lista de elementos en la matriz, por lo que no sé sus números de índice.

Para una mejor explicación

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

Como dije en mi comentario sobre esa otra pregunta , no importa qué es lo que está buscando, indexOflo encontrará si pasa lo mismo dentro indexOfde la matriz; indexOfefectivamente hace una ===comparación.

Ahora, si desea encontrar el índice de un objeto verificando sus propiedades, o una cadena usando una subcadena, o cualquier cosa que no sea solo una ===comparación, lo usaría findIndexcon una devolución de llamada (o findpara encontrar el objeto en sí).

¿Cómo puedo eliminarlos de la matriz usando los valores ...

De la misma manera: splicecon el índice de la entrada (si desea mantener la misma matriz) o filter(si desea crear una nueva matriz).

Answer 2

Consulte este fragmento. Cuando selecciona elementos usando métodos como getElementsByTagName, es posible que no devuelva una matriz. Puede ser una colección HTML o algún objeto según el método que elija.

Como puede ver (en la consola), initiallyes un object. Para cambiarlo a una matriz, vea cómo lo inicialicé elements, usando el [... ]resto del código es fácil de entender. Avísame si te quedas atascado :)

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

Obtendría un número aleatorio basado en la longitud de su matriz de elementos y luego empalmaría la matriz en función de ese número y devolvería el valor de ese empalme. Sin embargo, ese valor estará en una matriz, por lo que tendré que devolver el primer índice de esa matriz.

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>