前言

数组和对象都是 JS 中十分常见的数据类型，通过操作它们我们可以得到任何我们想要的数据，今天我们先来说说在 JS 中应该如何优雅的删除数组中指定的对象或者删除数组中某一项。

删除数组中指定的对象

下拉框组件

<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>

data

data() {
  return {
    optionsAudit: [], //下拉框数组
    shztModel: "", //下拉框绑定model
  };
},

模拟接口数据

let params = [
  {
    value: "0",
    label: "初审通过",
  },
  {
    value: "1",
    label: "初审不通过",
  },
  {
    value: "2",
    label: "未上报",
  },
  {
    value: "3",
    label: "复审通过",
  },
  {
    value: "4",
    label: "复审不通过",
  },
];

方法一（直接循环处理）

代码实例

mounted() {
  params.map((item, index) => {
    if (item.value == "2") {
      params.splice(index, 1);
      this.optionsAudit = params;
    }
  });
},

方法二 indexOf()

indexOf() 方法可以返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到匹配的字符串则返回 -1。

代码实例

mounted() {
  params.map((item, index) => {
    if (item.value.indexOf("2") > -1) {
      params.splice(index, 1);
      this.optionsAudit = params;
    }
  });
},

方法三（逆序遍历）

至于为什么要选择逆序遍历是因为因为删除元素使用正序循环遍历的话会引起后序元素移位导致漏掉。

代码实例

mounted() {
  for (let i = params.length - 1; i >= 0; i--) {
    if (params[i].value == "2") {
      params.splice(i, 1);
      this.optionsAudit = params;
    }
  }
},

实现效果

删除数组中指定的项

方法一 filter()

filter() 方法通过检查指定数组中符合条件的所有元素，filter() 方法不会改变原始数组。

代码实例

let arrList = ["周一", "周二", "周三", "周四", "周五"];
arrList = arrList.filter((item) => item != "周三");
console.log(arrList); // ['周一', '周二', '周四', '周五']

方法二 indexOf()

代码实例

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

方法三（逆序遍历）

代码实例

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