【2023-6-02】关于项目中数组遍历场景的记录

数组遍历的场景

先说下，简单的需求：

• 存在一个下拉框，每次选中一个选项后，需要展示在上方的列表中，且删除掉下来框中该选项
• 删除列表中对应值时，需要下拉框数据中增加该值

实现思路

• 下拉框选中值，添加至列表时，通过变量记录该选中值（添加到用于记录的数组中）
• 删除列表数据时，将删除值与记录的已添加的数组进行匹配，将满足条件的元素push值下拉框的option数组中，同时删除记录选中值数组中的改元素
• 更新视图

实现代码

初级版本

前车之鉴以供参考

<script>
  var arrayA = [{
      name: 'a',
      age: '1',
      property: 'a'
    },
    {
      name: 'b',
      age: '2',
      property: 'b'
    },
    {
      name: 'c',
      age: '3',
      property: 'c'
    },
    {
      name: 'd',
      age: '4',
      property: 'd'
    },
    {
      name: 'e',
      age: '5',
      property: 'e'
    },
  ]; // 数组A
  var arrayB = [{
      property: 'b'
    },
    {
      property: 'd'
    },
    {
      property: 'g'
    },
    {
      property: 'f'
    },
  ]; // 数组B
  var tempArr = []
  for (var i = 0; i < arrayA.length; i++) {
    var elementA = arrayA[i];
    for (var j = 0; j < arrayB.length; j++) {
      var elementB = arrayB[j];
      if (elementA.property === elementB.property) {
        arrayA.splice(i, 1);
        tempArr.push(elementA)
        i--; // 减少索引，以便下次循环检查当前位置的元素   
      }
    }
  }
  console.log('arrayA', arrayA)
  console.log('tempArr', tempArr)
</script>

优化版本

<script>
  var arrayA = [{
      name: 'a',
      age: '1',
      property: 'a'
    },
    {
      name: 'b',
      age: '2',
      property: 'b'
    },
    {
      name: 'c',
      age: '3',
      property: 'c'
    },
    {
      name: 'd',
      age: '4',
      property: 'd'
    },
    {
      name: 'e',
      age: '5',
      property: 'e'
    },
  ]; // 数组A
  var arrayB = [{
      property: 'a'
    },
    {
      property: 'd'
    },
    {
      property: 'g'
    },
    {
      property: 'f'
    },
  ]; // 数组B
  var tempArr = []
  for (var i = 0; i < arrayA.length; i++) {
    var elementA = arrayA[i];
    for (var j = 0; j < arrayB.length; j++) {
      var elementB = arrayB[j];
      if (elementA.property === elementB.property) {
        arrayA.splice(i, 1);
        tempArr.push(elementA)
        i--; // 减少索引，以便下次循环检查当前位置的元素
        break; // 跳出内部循环，继续下一个元素的判断
      }
    }
  }
  console.log('arrayA', arrayA)
  console.log('tempArr', tempArr)
</script>

相较于第一版，跳出内部循环后，整体执行语句的开销会减少。

如果不使用 break 语句跳出内部循环，并且希望在找到相同属性的元素后继续比较数组的剩余元素，可以使用一个额外的布尔变量来记录是否找到相同属性的元素，并将内部循环遍历完整个数组。然后，根据布尔变量的值决定是否删除数组A中的元素。

<script>
  var arrayA = [{
      name: 'a',
      age: '1',
      property: 'a'
    },
    {
      name: 'b',
      age: '2',
      property: 'b'
    },
    {
      name: 'c',
      age: '3',
      property: 'c'
    },
    {
      name: 'd',
      age: '4',
      property: 'd'
    },
    {
      name: 'e',
      age: '5',
      property: 'e'
    },
  ]; // 数组A
  var arrayB = [{
      property: 'a'
    },
    {
      property: 'd'
    },
    {
      property: 'g'
    },
    {
      property: 'f'
    },
  ]; // 数组B
  var tempArr = []
  for (var i = 0; i < arrayA.length; i++) {
    var elementA = arrayA[i];
    var foundMatch = false;
    for (var j = 0; j < arrayB.length; j++) {
      var elementB = arrayB[j];
      if (elementA.property === elementB.property) {
        tempArr.push(elementA)
        foundMatch = true;
      }
    }
    if (foundMatch) {
      arrayA.splice(i, 1);
      i--; // 减少索引，以便下次循环检查当前位置的元素
    }
  } 

  console.log('arrayA', arrayA)
  console.log('tempArr', tempArr)
</script>

进阶版本

<script>
  var arrayA = [{
      name: 'a',
      age: '1',
      property: 'a'
    },
    {
      name: 'b',
      age: '2',
      property: 'b'
    },
    {
      name: 'c',
      age: '3',
      property: 'c'
    },
    {
      name: 'd',
      age: '4',
      property: 'd'
    },
    {
      name: 'e',
      age: '5',
      property: 'e'
    },
  ]; // 数组A
  var arrayB = [{
      property: 'a'
    },
    {
      property: 'd'
    },
    {
      property: 'g'
    },
    {
      property: 'f'
    },
  ]; // 数组B
  var tempArr = []
   arrayA.forEach(function (elementA,index ) {
    arrayB.forEach(function (elementB) {
      if (elementA.property === elementB.property) {
        tempArr.push(elementA)
        arrayA.splice(index, 1);
      }
    });
  });  
  console.log('arrayA', arrayA)
  console.log('tempArr', tempArr)
</script>

这里则需要简单说明下，for循环和forEach遍历数组的优劣：
for 循环：
使用最广泛的方法，提供了完全的灵活性和控制。
需要手动管理索引和循环条件。

forEach 方法：
提供了一种简单且易于使用的遍历数组的方法。
无需手动管理索引和循环条件。
无法中断或跳出循环。

修改为forEach后，无需手动改变循环下标，代码也更加的简洁

tips

有时候疲于项目进度，代码质量方面就容易出现一些问题。机械化的工作，会减少人尝试新事物的激情。