轻松掌握 JS 删除数组中指定的对象或者删除数组中某一项

已于 2023-06-28 18:57:26 修改
阅读量3w 收藏 55
点赞数 6
分类专栏： JS 文章标签： 前端 vue
于 2022-10-11 09:43:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shids_/article/details/127125930
版权

前言

关于 JS 删除数组中指定的对象或某一项的话题，它是在实际开发中经常会遇到的问题，也是需要掌握的基本技能。在这篇文章中，我们将深入探讨如何使用 JS 来删除数组中指定的对象或者删除数组中某一项。

删除数组中指定的对象

方法一：使用 filter

这种方法使用了 vue 的 filter 方法，它会创建一个新的数组，其中不包含满足条件的对象。condition 是一个函数，用于判断对象是否满足条件。在这个方法中，我们遍历数组中的每个对象，如果对象满足条件，则不包含在新数组中，最后将新数组赋值给原数组。

代码实例

<template>
  <div>
    <el-select v-model="shztModel" clearable placeholder="请选择审核状态">
      <el-option v-for="item in optionsAudit" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shztModel: "",
      optionsAudit: [
        {
          value: "1",
          label: "初审通过",
        },
        {
          value: "2",
          label: "初审不通过",
        },
        {
          value: "3",
          label: "未上报",
        },
        {
          value: "4",
          label: "复审通过",
        },
        {
          value: "5",
          label: "复审不通过",
        },
      ],
    };
  },
  mounted() {
    this.optionsAudit = this.optionsAudit.filter(
      (item) => !this.condition(item)
    );
    console.log(this.optionsAudit);
  },
  methods: {
    condition(item) {
      return item.value == "2";
    },
  },
};
</script>

方法二：使用 splice 方法和 forEach

这种方法使用了 vue 的 splice 方法和 forEach 方法。我们遍历数组中的每个对象，如果对象满足条件，则使用 splice 方法删除该对象。splice 方法的第一个参数是要删除的对象的索引，第二个参数是要删除的对象的数量。

代码实例

<template>
  <div>
    <el-select v-model="shztModel" clearable placeholder="请选择审核状态">
      <el-option v-for="item in optionsAudit" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shztModel: "",
      optionsAudit: [
        {
          value: "1",
          label: "初审通过",
        },
        {
          value: "2",
          label: "初审不通过",
        },
        {
          value: "3",
          label: "未上报",
        },
        {
          value: "4",
          label: "复审通过",
        },
        {
          value: "5",
          label: "复审不通过",
        },
      ],
    };
  },
  mounted() {
    this.optionsAudit.forEach((item, index) => {
      if (this.condition(item)) {
        this.optionsAudit.splice(index, 1);
      }
    });
    console.log(this.optionsAudit);
  },
  methods: {
    condition(item) {
      return item.value == "2";
    },
  },
};
</script>

方法三：使用 $delete 和 forEach

这种方法使用了 vue 的 delete 方法和 forEach 方法。我们遍历数组中的每个对象，如果对象满足条件，则使用 delete 方法和 forEach 方法。我们遍历数组中的每个对象，如果对象满足条件，则使用 delete 方法删除该对象。$delete 方法的第一个参数是要删除的对象所在的数组，第二个参数是要删除的对象的索引。

代码实例

<template>
  <div>
    <el-select v-model="shztModel" clearable placeholder="请选择审核状态">
      <el-option v-for="item in optionsAudit" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shztModel: "",
      optionsAudit: [
        {
          value: "1",
          label: "初审通过",
        },
        {
          value: "2",
          label: "初审不通过",
        },
        {
          value: "3",
          label: "未上报",
        },
        {
          value: "4",
          label: "复审通过",
        },
        {
          value: "5",
          label: "复审不通过",
        },
      ],
    };
  },
  mounted() {
    this.optionsAudit.forEach((item, index) => {
      if (this.condition(item)) {
        this.$delete(this.optionsAudit, index);
      }
    });
    console.log(this.optionsAudit);
  },
  methods: {
    condition(item) {
      return item.value == "2";
    },
  },
};
</script>

方法四：使用 reduce

这种方法使用了 vue 的 reduce 方法。我们遍历数组中的每个对象，如果对象不满足条件，则将其添加到一个累加器数组中。最后，将累加器数组赋值给原数组。reduce 方法的第一个参数是一个回调函数，该函数接受两个参数：累加器和当前对象。回调函数返回的值将作为下一次迭代的累加器的值。在这个方法中，我们使用一个空数组作为初始累加器的值。

代码实例

<template>
  <div>
    <el-select v-model="shztModel" clearable placeholder="请选择审核状态">
      <el-option v-for="item in optionsAudit" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shztModel: "",
      optionsAudit: [
        {
          value: "1",
          label: "初审通过",
        },
        {
          value: "2",
          label: "初审不通过",
        },
        {
          value: "3",
          label: "未上报",
        },
        {
          value: "4",
          label: "复审通过",
        },
        {
          value: "5",
          label: "复审不通过",
        },
      ],
    };
  },
  mounted() {
    this.optionsAudit = this.optionsAudit.reduce((acc, item) => {
      if (!this.condition(item)) {
        acc.push(item);
      }
      return acc;
    }, []);
    console.log(this.optionsAudit);
  },
  methods: {
    condition(item) {
      return item.value == "2";
    },
  },
};
</script>

方法五：使用 findIndex（es6） 和 splice

使用 findIndex 方法来查找数组中满足条件的对象的索引。判断对象的 value 属性值是否等于 2。如果等于，则使用 splice 方法删除它。

代码实例

<template>
  <div>
    <el-select v-model="shztModel" clearable placeholder="请选择审核状态">
      <el-option v-for="item in optionsAudit" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shztModel: "",
      optionsAudit: [
        {
          value: "1",
          label: "初审通过",
        },
        {
          value: "2",
          label: "初审不通过",
        },
        {
          value: "3",
          label: "未上报",
        },
        {
          value: "4",
          label: "复审通过",
        },
        {
          value: "5",
          label: "复审不通过",
        },
      ],
    };
  },
  mounted() {
    let index = this.optionsAudit.findIndex((item) => item.value == "2");
    if (index !== -1) {
      this.optionsAudit.splice(index, 1);
    }
    console.log(this.optionsAudit);
  },
};
</script>

实现效果

在这里插入图片描述

删除数组中指定的项

方法一：使用 filter

使用 filter 方法可以创建一个新的数组，其中包含满足条件的项。这样就可以实现删除数组中指定项的效果。
filter() 方法通过检查指定数组中符合条件的所有元素，filter() 方法不会改变原始数组。

代码实例

mounted() {
  let arrList = ["周一", "周二", "周三", "周四", "周五"];
  arrList = arrList.filter((item) => item !== "周三");
},

方法二：使用 splice

splice 方法可以直接修改原始数组，通过指定要删除的项的索引和要删除的项的数量来实现删除。

代码实例

mounted() {
  let arrList = ["周一", "周二", "周三", "周四", "周五"];
  const index = arrList.indexOf("周三");
  if (index > -1) {
    arrList.splice(index, 1);
  }
},

方法三：使用 reduce

reduce 方法可以遍历数组并返回一个累加的结果。我们可以使用 reduce 方法来创建一个新的数组，其中不包含满足条件的项。

代码实例

mounted() {
  let arrList = ["周一", "周二", "周三", "周四", "周五"];
  arrList = arrList.reduce((acc, item) => {
    if (item !== "周三") {
      acc.push(item);
    }
    return acc;
  }, []);
},

方法四：computed 属性

在这种方法中，我们可以创建一个 computed 属性，例如 filteredArray，它会根据条件过滤数组中的项，并返回一个新的数组，当数组发生变化时，computed 属性会自动更新，因此无需手动调用删除方法。只需在模板中使用 computed 属性即可获取过滤后的数组。

代码实例

computed: {
  filteredArray() {
    let arrList = ["周一", "周二", "周三", "周四", "周五"];
    return arrList.filter((item) => item !== "周三");
  },
},

方法五：逆序遍历

在这个方法中，我们使用了一个逆序的 for 循环，从数组的最后一项开始遍历，直到第一项。在每次循环中，我们判断当前项是否等于要删除的指定项，如果是，则使用 splice 方法删除该项。

逆序遍历的优点是可以避免在删除数组项时对数组索引的影响。由于我们是从最后一项开始遍历，因此删除当前项不会影响后面项的索引，保证了删除操作的准确性。

然而，需要注意的是，逆序遍历会改变数组的顺序。如果需要保持数组的顺序不变，可以使用其他方法，如前面提到的 filter 方法或 slice 方法。

总之，逆序遍历是一种实现根据条件删除数组中指定项的方法，它可以避免对数组索引的影响，但会改变数组的顺序。根据具体需求选择合适的方法来实现删除功能。

代码实例

mounted() {
  let arrList = ["周一", "周二", "周三", "周四", "周五"];
  for (let i = arrList.length - 1; i >= 0; i--) {
    if (arrList[i] === "周三") {
      arrList.splice(i, 1);
    }
  }
},

打印结果

在这里插入图片描述

水星记_
关注
专栏目录
JavaScript - 根据对象数组中某一属性删除该项（根据数组对象属性删除里面的对象）
王佳斌
12-21 1万+
js删除数组对象中的某个属性的方法，js根据对象数组中某一属性删除该项(根据数组对象属性删除，JS实现数组/对象数组删除其中某一项，JS根据数组对象属性删除对应对象，js对象数组中,通过属性删除指定的对象，JS中删除对象的某个属性，js根据对象的id,删除数组对象里的某个值，js删除对象中的某一个字段，js删除对象数组中一条对象，js 根据条件删除数组中某个对象&js filter过滤数组对象，JavaScript如何从数组(数组对象)中删除特定数据，JS如何删除对象中的某一属性(delete)
js 从对象数组中 删除 指定的对象
zhangyubababa的博客
10-10 1514
js 从对象数组中 删除 指定的对象
js删除数组中的指定对象
个人网站：https://www.longzipeng.online
06-14 7099
js删除数组中的指定对象
JS 删除数组中某个元素
前端开发工程师博客
06-19 1786
slice。
JS 删除数组元素（ 5种方法 ）
最新发布
m0_70547044的博客
08-16 802
语法注意事项pop()方法会直接修改原数组，减少数组长度。它返回被删除的最后一个元素。代码示例// 输出: 3// 输出: [1, 2]splice()适合删除任意位置的元素，且可以一次删除多个。pop()和shift()分别用于删除末尾和头部的单个元素。使用delete操作符会导致数组中出现undefined值，而非真正缩小数组大小。调整length属性可快速截断数组，但请确保了解其对数组影响的特殊性。
js中数组删除对象的几种方式总结
热门推荐
huxihua2006的博客
08-15 1万+
【代码】js中数组删除对象的几种方式总结。
删除对象数组中某个对象
11-13
该方法是用来删除对象数组里面某个对象，造个轮子方便大家使用。
js 数组移除某个对象
qq_33240556的博客
04-09 1897
是数组原生方法，可以用于删除、替换或添加数组中的元素。要移除某个对象，你需要知道该对象在数组中的索引。一般来说，如果需要保持原数组不变，或不需要知道对象的索引，使用。，但这并不会改变数组的长度，且可能会导致数组中出现空洞。因此，不建议使用这种方法来移除数组中的对象。关键字可以删除对象属性，但它并不适用于从数组中移除元素。会遍历数组，对每个元素应用提供的回调函数，并保留回调返回值为。如果需要直接修改原数组且已知索引，使用。方法创建一个新的数组，其中不包含要移除的对象。如果你不关心被移除对象的索引，可以使用。
js删除数组中的某个对象
Gblfy_Blog
12-25 767
var keyid = 'str6-986'; var tableData = [ {Id:'6789-201',Type:'试产'}, {Id:'str6-986',Type:'量产'}, {Id:'o786-112',Type:'试产'} ]; for(var i=0; i<tableData.length; i++){ if(tableData[i].Id === keyid){ tableData.splice(i,1); } } console.log(
js删除数组中指定的对象
debug_fang的博客
03-12 788
找到要删除对象的下标，然后调用shift()、pop()、或splice()方法 shift()方法，删除并返回数组的第一个元素 pop()方法，删除并返回数组的最后一个元素 splice(index,1)，删除下标为i的元素
删除对象数组的某一项
liuli0927的博客
09-12 227
{id:'003',name:'打代码',done:false},{id:'001',name:'吃饭',done:true},{id:'002',name:'睡觉',done:true},splice会改变原数组，最后删除剩下的元素就是todos里面的。
Javascript根据指定下标或对象删除数组元素
12-12
将一下代码放在全局js文件中： Js代码 代码如下: /** *删除数组指定下标或指定对象 */ Array.prototype.remove=function(obj){ for(var i =0;i <this.length;i++){ var temp = this[i]; if(!isNaN(obj)){ temp=i;...
Js删除数组中某一项或几项的几种方法(推荐)
12-11
splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值 index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空 如：arr = [‘a’,’b’,’c’,’d’] 删除 —- item不...
js删除数组中某几项的方法总结
10-17
首先，splice方法是JavaScript数组最强大的方法之一。splice可以用来添加、删除或替换数组中的元素。它的使用格式为splice(start, deleteCount, item1, item2, ...), 其中start是开始删除的数组索引，deleteCount是...
删除数组对象中的某一项
yxorg的博客
04-26 3135
需求：按某要求删除数组对象中的特定某几项 代码实现： // 循环 如果小于5就删除 const arr = [1,2,3,4,5,6,7,8] for(let i = 0, len = arr.length; i < len; i++) { if(arr[i] < 5) { arr.splice(i, 1) } } 结果如下： [2, 4, 5, 6, 7, 8] 分析原因：删除操作会使得对应索引值位上的元素清空，整个数组中的元素向前移动一位，补位的元素会填充到执行删除操作的索引值
JS 删除数组中的某一个对象
kuroshiro的博客
08-25 1077
【代码】JS 删除数组中的某一个对象。
js根据数组对象属性删除里面的指定对象
知行合一
10-21 3013
js根据数组对象属性删除数组指定的对象
前端 |【JavaScript】JS 删除数组中某个元素的方法有哪些？超简洁六大方法！
dddwes的博客
05-29 2621
/ 创建一个数组四、pop方法JavaScript中的pop()方法用于删除数组的最后一个元素，并返回被删除的元素。// 创建一个数组a.pop();五、shift方法JavaScript中的shift()方法用于删除数组的第一个元素，并返回被删除的元素。// 创建一个数组a.shift();六、filter方法JavaScript中的filter()方法用于筛选数组中满足条件的元素，并返回一个新的数组。可用于删除数组中某个指定元素。callback：用于测试数组中的每个元素的函数。
js删除数组中指定对象
DuebassLei的博客
02-11 5935
js删除数组中指定对象需求说明从数组中移除指定对象函数封装 `removeArray`从数组中获取指定对象索引函数封装 `getArrayIndex `在`Vue`中调用函数使用 需求说明 点击删除按钮删除指定行数据，即删除数组中指定对象。 _arr表示一个Array数组，里面包括了很多的对象如下图： 从数组中移除指定对象函数封装 removeArray /** * 从数组中删除指定对象 * _arr:数组 * _obj:需删除的对象 * */ export function rem
js 删除数组中的某一项
07-27
要删除数组中的某一项，你可以使用 JavaScript 中的 `splice` 方法。`splice` 方法可以删除指定位置的元素，并返回被删除的元素组成的新数组。以下是一个示例： ```javascript let arr = [1, 2, 3, 4, 5]; let index = 2; // 要删除的元素的索引 arr.splice(index, 1); // 从索引为2的位置删除1个元素 console.log(arr); // 输出: [1, 2, 4, 5] ``` 在上述示例中，我们使用 `splice` 方法从数组 `arr` 的索引为2的位置删除了一个元素。删除后，数组中的元素变为 `[1, 2, 4, 5]`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值