JS根据属性值从对象数组中删除指定元素

作者:木棉

时间:2026-10-30

浏览:244

本文介绍如何在JavaScript中根据特定属性值从对象数组中删除对应元素。通过遍历数组查找匹配项,利用splice方法移除元素,实现前端无需重新请求接口即可更新页面数据,适用于Vue等框架的数据绑定场景。

文章目录

假设有一个卡片列表,需要在该列表中移除其中一项。为了优化性能,删除操作后不再重新调用获取数据的接口,而是直接在前端更新页面。例如在使用Vue时,只需修改卡片列表的模型数据,页面即可自动重新渲染。

根据对象数组中某一属性的值删除包含这一属性值的对象

该卡片列表的模型通常是一个对象数组,结构如[{cardid:001,cardno:"432434234"},{cardid:002,cardno:"546436"},...]。其中cardid是唯一标识,每项的值均不相同。删除操作时,便依据这一属性来定位并移除目标对象。

以下是根据属性从对象数组中删除对应对象的方法实现(此方法一次仅支持删除一个元素):

removeByValue: function(arr, attr, value) {  //数组,属性,属性值
                var index=0;
                for(var i in arr){
                    if(arr[i][attr]==value){
                        index=i;
                        break;
                    }
                }
                arr.splice(index,1);
             }

在调用删除接口的成功回调函数中,可按如下方式调用该方法:

Util.removeByValue(that.cards,"cardid",cardId); //参数分别为:卡列表数组,属性名,被删卡的属性值

根据对象数组中某一属性的值删除包含这一属性值的对象

// 原数组
var cars = [
  {type:"BMW", year:2017},
  {type:"Audi", year:2019},
  {type:"porsche", year:2018}
];
// 方法
function removeByValue(arr, attr, value)
 { 
  var index=0;
  for(var i in arr){
    if(arr[i][attr]==value){
      index=i;
      break;
    }
  }
  arr.splice(index,1);
}
removeByValue(cars,"type","BMW");
console.log(cars);

箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章