我该如何在JavaScript中删除一个对象？

Question

这是一个类似于这样的数组：

var array = [
              {SchoolId: 2  ,GraderId: 465 , SchoolGraderName: "Example1256"},
              {SchoolId: 2  ,GraderId: 654,SchoolGraderName: "Example45"},
              {SchoolId: 2  ,GraderId: 876,SchoolGraderName: "Example895"},
              {SchoolId: 34 ,GraderId: 796,SchoolGraderName:"Example2156"},
              {SchoolId: 45 ,GraderId: 356,SchoolGraderName:"Example315"},
              {SchoolId: 45 ,GraderId: 457,SchoolGraderName:"Example56715"}
              {SchoolId: 45 ,GraderId: 678,SchoolGraderName:"Example37675"}
              {SchoolId: 45 ,GraderId: 465 ,SchoolGraderName:"Example97685615"}
            ]

我试图删除所有GraderId等于某个值的对象：

$(function() {
            $("#schoolGraders").on("dblclick",
                function() {
                    $.each(array,function(i,r){
                        if (r.GraderId == $(this).val()) {
                            r.removeItem;
                       }
                });
        });

以上代码不起作用。

以下是HTML代码：

<select class="form-control" id="schoolGraders" style="width: 80%; height: 200px" 
multiple></select>

我这样生成选项：

item = "";
                $.ajax({
                    type: "GET",
                    url: "address" + $(this).val(),
                    contentType: "application/json",
                    dataType: "json"
                }).done(function (res) {
                    var iteem = "";
                    $.each(res,
                        function (i, r) {
                            iteem += '<option value="' + r.id + 
                             '">' + r.title + '</option>';
                        });
                    $("#graderSchools").html(iteem);
                });

在 JavaScript 中是否有任何条件，以便我可以删除 GraderId 为某个值的对象？

- M.imp

---

为什么我们要使用jQuery？简单就是美。五年前使用jQuery很有意义，但现在不再是这样了。 - zipzit

不要使用数组，考虑使用 Set。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set - Brad

这个回答解决了你的问题吗？如何从数组中删除特定项？ - Peter B

@PeterB 不，它只删除一个元素，我想要根据给定的GraderId条件删除一个对象。 - M.imp

@M.imp 接受了超过14000个赞的答案说：“找到要移除的数组元素的索引[...]然后使用splice删除该索引”。这个方法完全适用，特别是当与其他回答组合使用时，可以展示如何在不使用indexOf的情况下查找索引。 - Peter B

Answer 1

也许可以像这样，假设您想要删除GraderId为876的对象。

var array = [
              {SchoolId: 2  ,GraderId: 465 , SchoolGraderName: "Example1256"},
              {SchoolId: 2  ,GraderId: 654,SchoolGraderName: "Example45"},
              {SchoolId: 2  ,GraderId: 876,SchoolGraderName: "Example895"},
              {SchoolId: 34 ,GraderId: 796,SchoolGraderName:"Example2156"},
              {SchoolId: 45 ,GraderId: 356,SchoolGraderName:"Example315"},
              {SchoolId: 45 ,GraderId: 457,SchoolGraderName:"Example56715"},
              {SchoolId: 45 ,GraderId: 678,SchoolGraderName:"Example37675"},
              {SchoolId: 45 ,GraderId: 465 ,SchoolGraderName:"Example97685615"}
            ]
            
array.forEach((item, index) => {
    if(item.GraderId === 876){
    delete array[index]
  }
})

console.log(array)

- ahsan

---

没有起作用： $(function() { $("#schoolGraders").on("dblclick", function () { var deletedGraderId = $(this).val(); $("#schoolGraders option[value=" + $(this).val() + "]").remove(); array.forEach((item, index) => { alert("hi"); if (item.GraderId === deletedGraderId) { delete array[index]; } }); }); }); - M.imp

JS中的delete不仅仅是将元素设置为undefined吗？ - DragonInTraining

@DragonInTraining 不是的。Delete 用于从对象中删除属性。在控制台中运行以下代码：let name = {family: "Tosh", first: "Peter"}; delete name.first; name; - Jose Rui Santos

DragonInTraining 是正确的，这与 array[index] = undefined; 完全相同，而且 array.length 不会改变。 - Peter B

哦，对于数组来说，你是正确的。删除不会移除该项，而是将其设置为未定义。要移除该项，请使用splice。 - Jose Rui Santos

Answer 2

您可以使用filter()函数：

var array = [
  {SchoolId: 2  ,GraderId: 465 , SchoolGraderName: "Example1256"},
  {SchoolId: 2  ,GraderId: 654,SchoolGraderName: "Example45"},
  {SchoolId: 2  ,GraderId: 876,SchoolGraderName: "Example895"},
  {SchoolId: 34 ,GraderId: 796,SchoolGraderName:"Example2156"},
  {SchoolId: 45 ,GraderId: 356,SchoolGraderName:"Example315"},
  {SchoolId: 45 ,GraderId: 457,SchoolGraderName:"Example56715"}
  {SchoolId: 45 ,GraderId: 678,SchoolGraderName:"Example37675"}
  {SchoolId: 45 ,GraderId: 465 ,SchoolGraderName:"Example97685615"}
]

const filteredArr = array.filter(item => item.GraderId !== $(this).val())

然后使用这个 filteredArray 将项目映射到 HTML。保留HTML，不要解释。

- Dharmaraj

---

@M.imp 是的，它会返回一个新数组，不包含那些值。然后使用新数组来添加项目到HTML中。 - Dharmaraj

@M.imp，你能在那个选择器周围提供一些HTML吗？ - Dharmaraj

除了我在问题中提供的HTML代码之外，没有其他内容。 - M.imp

不，我正在尝试删除一个具有相等GraderId的条件对象。 - M.imp

@M.imp，你要删除什么并不清楚。我只看到了一个选择。在这种情况下，“object”是什么？ - Dharmaraj

Answer 3

我找到了方法，谢谢大家。在这里，我想分享给每个人，这样每个人都可以使用它。

$("#schoolGraders").on("dblclick",
                function () {

                    var deletedGraderId = $(this).val();

                    var schoolId = $("#selectedSchools").val();

                    $.each(array,
                        function (i, r) {
                            if (r.GraderId == deletedGraderId && r.SchoolId == schoolId) {
                                array.splice(i, 1);
                            }
                        });


                });

- M.imp

Answer 4

filter 方法过滤数组，删除不符合条件参数的元素。通常是在 js 中删除数组元素的最佳方式。

我认为你代码中的主要问题是 this.val()。 this 是一个相当高级的 js 概念，它根据上下文具有多个含义。在你的情况下，我认为它指的是你的 each 回调的当前值 r，而不是 select 元素。我更喜欢使用 evt.currentTarget。

以下代码必须在 done 回调中调用，因为在此之前该元素不存在。由于这种不存在元素的错误，jQuery 会静默忽略。

var schoolGraders = document.getElementBydId('schoolGraders');
schoolGraders.addEventListener('dblclick', (evt)=> {
    array.filter((obj,i)=>  obj.GraderId != +evt.currentTarget.value)
});

然而，我会谨慎使用双击事件，因为它在安卓浏览器上支持较差。

- Nice Books