delete 和 splice

平时看了很多的文章都说 spice 性能比较差,删除一位要改变所有元素的位置性能开销比较大,建议用 delete

这两天正好想试一试,但是尝试一番发现并没有想象中的那样是碾压之势

        <el-checkbox
          v-model="checkList"
          style="margin: 10px auto"
          :label="item.id"
          @change="setCheck(item)"
          border
          >{{ item.title }}</el-checkbox
        ><el-checkbox-group v-model="checkList" @change="getCheckbox"
          ><div
            style="display: flex; justify-content: flex-start; flex-wrap: wrap"
          >
            <el-checkbox
              v-for="m in item.menu"
              :key="m.id"
              :label="m.id"
              style="margin: 5px 5px"
              @change="setCheckbox(item)"
              >{{ m.title }}</el-checkbox
            >
          </div></el-checkbox-group
        >
      </div>

dom 结构差不多是这样的,因为都是从后台获取的数据,结构也是一个大选项下若干个小选项,我就直接用了

两个 v-for 后端说大选项的 id 也要上传然后选项数量也没定我就这样写想着一次搞完,所有的都是绑定一个数组

然后实现大标题能够实现全选和取消全选,本菜鸡想了半天想到的就如下

 setCheck(e) {
  // 判断当前选了没有
    开始我的想的搜索一下,用some来看有没有
  // let is = this.checkList.some((i) => {
  //   return i === e.id;
  // });
  随后发现当前选的总是在最后一位就直接对比最后一位
  let is = this.checkList[this.checkList.length - 1] === e.id;
  // 选了就删除下面所有的
  if (!is) {
    // 遍历当前下面的按钮
    e.menu.forEach((item) => {
      // 有就删了
      this.checkList.some((el, index) => {
        if (el === item.id) delete this.checkList[index];
        // if (el === item.id) this.checkList.splice(index, 1);
        return el === item.id;
      });
    });
    开始想着完事就清楚空的位置,但是后来放到了提交的地方一起清空
    // this.checkList = this.tool.compact(this.checkList);
  } else {
    // 没有就加上所有的
    e.menu.forEach((item) => {
      this.checkList.push(item.id);
    });
  }
},

然后是子选项,子选项为空的时候取消大选项的,有一个子选项的时候选上大的

    setCheckbox(e) {
  查看大选项有没有选上
  let is = this.checkList.some((i) => {
    return i === e.id;
  });
  查看大选项下有没有子选项选中了
  let isMenu = e.menu.some((el) => {
    return this.checkList.some((item) => {
      return el.id === item;
    });
  });
  没有就删了
  if (!isMenu) {
    let index = this.checkList.findIndex((element) => element === e.id);
    this.checkList.splice(index, 1);
  }
  没有就勾上
  if (!is) {
    this.checkList.push(e.id);
  }
},

整个结构是这样的,个人感觉实现的十分丑陋,希望各位能指点指点,由于实现的比较丑陋我就十分在意性能

结果也是没让我失望,在快速点击大标题下i5-9400f的占用能跑到30%多,我不自觉就笑了,面向性能编程开创人

然后我就想起数组的删除,想从这里优化减少消耗,但是用了delete继续快速点击发现并没有更低,反而上限还

高了,和我预期是很不符,我期望他至少也该下降一点,没想到反而多了一点,求指点迷津

什么是数组删除的最优解

delete 和 splice