Bootstrap

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

前言

关于 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);
    }
  }
},

打印结果

在这里插入图片描述

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
MVVM开发模式实例解析
HTML 列表标签、有序列表、无序列表、自定义列表dl dt dd
论 ONLYOFFICE：开源办公套件的深度探索
YOLOv1-车辆位置检测
docker-elastic7.9.3集群搭建并开启用户验证
linux----使用rm -rf 删除大文件后磁盘空间并未释放的解决办法
计算机毕业设计SSM 校园疫情防控系统【附源码数据库】
mysql 崩溃机制_数据库崩溃时事务的恢复机制（REDO日志和UNDO日志）?
超强详细安装教程 VM虚拟机安装Kali linux版
数字人，虚拟数字人——你看好数字人领域的发展吗？
;