Wie entferne ich ein Objekt mit spilce aus dem Array?

Question

Ich habe kürzlich eine Frage gestellt: ( Wie entferne ich ein Element aus einem Array in Javascript, ohne ein neues zu erstellen? ).

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

Jetzt muss ich dieses Array zweimal verwenden, sobald ich ein zufälliges Element daraus auswählen und einige Eigenschaften darauf anwenden muss, und zweitens muss ich das Element, für das ich Eigenschaften angewendet habe, platzieren. Es ist auch eine lange Liste von Elementen im Array, so dass ich ihre Indexnummern nicht kenne.

Zur besseren Erklärung

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

Wie ich in meinem Kommentar zu dieser anderen Frage sagte , spielt es keine Rolle, wonach Sie suchen. Sie indexOfwerden es finden, wenn Sie dasselbe indexOfin das Array übergeben. indexOfmacht effektiv einen ===Vergleich.

Wenn Sie nun den Index eines Objekts suchen möchten, indem Sie seine Eigenschaften überprüfen, oder eine Zeichenfolge mit einem Teilstring oder etwas, das nicht nur ein ===Vergleich ist, verwenden Sie ihn findIndexmit einem Rückruf (oder findum das Objekt selbst zu finden).

Wie kann ich sie mit den Werten aus dem Array entfernen ...

Genauso: splicemit dem Index des Eintrags (wenn Sie dasselbe Array behalten möchten) oder filter(wenn Sie ein neues Array erstellen möchten).

Answer 2

Kasse dieses Snippet. Wenn Sie Elemente mit Methoden wie auswählen getElementsByTagName, wird möglicherweise kein Array zurückgegeben. Je nach gewählter Methode kann es sich um eine HTML-Sammlung oder ein Objekt handeln.

Wie Sie sehen können (in der Konsole), initiallyist ein object. Um es in ein Array zu ändern, sehen Sie, wie ich es initialisiert habe elements. Die Verwendung des [... ]restlichen Codes ist leicht zu verstehen. Lass es mich wissen, wenn du feststeckst :)

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

Ich würde eine Zufallszahl basierend auf der Länge Ihres Elementarrays erhalten und dann das Array basierend auf dieser Zahl spleißen und den Wert von diesem Spleiß zurückgeben. Dieser Wert befindet sich jedoch in einem Array, sodass ich den ersten Index dieses Arrays zurückgeben muss.

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>