js 循环删除数组

问题

在码代码的过程中，经常会遇到在循环中移除指定元素的需求。按照常规的思路，直接一个for循环，然后在循环里面来个if判断，在判断中删除掉指定元素即可。但是实际情况往往不会像预想的那样顺利运行.

• 原因：当删除掉了一个元素后，数组的长度发生的变化，造成了程序的异常。

    // 如果数组2中的数据再数组1中存在，则删除此数据
    let arr1 = [
      { id: 1, name: '鸡腿堡' },
      { id: 2, name: '鳕鱼堡' },
      { id: 3, name: '香辣鸡翅' },
      { id: 4, name: '百世可乐' },
      { id: 5, name: '汉堡' },
      { id: 6, name: '可口可乐' }
    ];
    let arr2 = [
      { id: 7, name: '百世可乐' },
      { id: 8, name: '可口可乐' },
      { id: 9, name: '鸡腿堡' },
      { id: 10, name: '麻辣鸡翅' },
      { id: 11, name: '鸡腿堡' },
      { id: 12, name: '红烧鸡翅' },
    ];

循环删除后的数据.png

解决方法

1.删除成功后数组下标减1

    for (let i = 0; i < arr2.length; i++) {
      for (let j = 0; j < arr1.length; j++) {
        if (arr2[i] && arr2[i].name === arr1[j].name) {
          // 删除元素后改变i的值
          arr2.splice(i--, 1);
        }
      }
    }

2.从数组后向前遍历,从而避免数组删除后长度改变问题

    for (let i = arr2.length - 1; i >= 0; i--) {
      for (let j = 0; j < arr1.length; j++) {
        if (arr2[i].name === arr1[j].name) {
          arr2.splice(i, 1);
        }
      }
    }

3.使用while(k--),k为数组下标

  let k = arr2.length;
    while (k--) {
      for (let i = 0; i < arr1.length; i++) {
        if(arr2[k].name === arr1[i].name) {
          arr2.splice(k, 1);
        }
      }
    }

4.设置一个flag,根据flag进行判断下标是否应该自加

    for (let i = 0, flag = true; i < arr2.length; flag ? i++ : i) {
      for (let j = 0; j < arr1.length; j++) {
        if (arr2[i].name === arr1[j].name) {
          arr2.splice(i, 1);
          flag = false;
          break;
        } else {
          flag = true;
        }
      }
    }

    console.log(arr1);
    console.log(arr2);

参考：https://muchstudy.com/2017/04/07/%E5%BE%AA%E7%8E%AF%E5%88%A0%E9%99%A4%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E5%87%A0%E7%A7%8D%E5%A7%BF%E5%8A%BF/