如何使用spilce从数组中删除对象? [英] How to remove an object from array using spilce?

查看：22 发布时间：2021/9/23 20:41:04 javascript html

本文介绍了如何使用spilce从数组中删除对象?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我最近问了一个问题 (如何在 javascript 中从数组中删除元素而不创建新元素?).

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

现在我必须使用这个数组两次，一次我需要从中选择随机元素并在其上应用一些属性，然后我需要弹出我应用了属性的元素.它也是数组中的一长串元素，所以我不知道它们的索引号.

为了更好的解释

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")]//第一次使用功能自动机会(){const randomBlock = blocks[Math.floor(Math.random() * blocks.length)];randomBlock.style.backgroundColor='蓝色';}//第二次使用函数 b1Click(){b1.style.backgroundColor="红色"const index = blocks.indexOf('document.getElementById("b2")');blocks.splice(index, 1);控制台日志(块)自动机会()}//如果你在控制台看到它删除了最后一项

.blocks{宽度:310px；高度:304px；溢出包装:正常；背景颜色:浅绿色；}#b1,#b2,#b3,#b4,#b5,#b6,#b7,#b8,#b9{宽度:100px；高度:100px；位置:相对；}

<html lang="zh-cn"><头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档</title><link rel="stylesheet" href="style.css"><身体><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>

<script src="script.js"></script></html>

解决方案

正如我在我的评论另一个问题，不管你在找什么，indexOf 会找到它，如果你将同样的东西传递到数组中的 indexOf 中；indexOf 有效地进行了 === 比较.

现在，如果您想通过检查对象的属性，或使用子字符串的字符串或任何不只是 === 比较的内容来查找对象的索引，您需要使用 findIndex 带有回调(或 find 找到对象本身).

<块引用>

如何使用值从数组中删除它们...

同样的方式:splice 与条目的索引(如果您想保持相同的数组)或 filter(如果你想创建一个新数组).

I recently asked a question of (How to remove an element from array in javascript without making a new?).

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

Now I have to use this array twice once i need choose random element from it and apply some properties on it and second i need to pop the element i have applied properties. Also its a long list of elements in array so i dont know their index numbers.

For better explanation

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>

解决方案

As I said in my comment on that other question, it doesn't matter what it is you're looking for, indexOf will find it if you pass the same thing into indexOf that's in the array; indexOf effectively does a === comparison.

Now, if you want to find the index of an object by checking its properties, or a string using a substring, or anything that isn't just a === comparison, you'd use findIndex with a callback (or find to find the object itself).

How can i remove them from array using the values...

The same way: splice with the index of the entry (if you want to keep the same array) or filter (if you want to create a new array).

这篇关于如何使用spilce从数组中删除对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何使用spilce从数组中删除对象? [英] How to remove an object from array using spilce?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何使用spilce从数组中删除对象? [英] How to remove an object from array using spilce?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭