前端实际项目中的数组用处

业务需求原理： 两个数组求并集并且更新有交集的部分
数组知识： 数组深拷贝，数组删除、数组过滤

代码实现：

// 简化后的业务需求：两个数组求并集并且更新有交集的部分，以新数组的数据为准更新
    // 旧数组
    const oldArr = [
      { name: '金', age: 18, sex: '男' },
      { name: '木', age: 99, sex: '男' },
      { name: '土', age: 45, sex: '女' },
    ];
    // 新数组
    const newArr = [
      { name: '金', age: 55, sex: '男' },
      { name: '木', age: 78, sex: '男' },
      { name: '水', age: 21, sex: '女' },
      { name: '火', age: 9, sex: '男' },
      { name: '土', age: 66, sex: '女' },
    ];
    // 代码解析:新旧数组对比，删掉旧数组中的重叠的数据，再将新旧数组整合
    // 先深拷贝一个旧数组
    const midArr = [];
    oldArr.map(persons => {
      midArr.push({ ...persons });
    });
    oldArr.map((oldPersons, index) => {
      newArr.map((newPersons, index2) => {
        if(oldPersons.name === newPersons.name){
          delete midArr[index];
        }
      });
    });
    const newMidArr = midArr.filter(item=>item);
    const finalArr = newArr.concat(newMidArr);
    console.log(finalArr);

以上代码是精简后的业务需求
实际的需求：

1. 考虑原数组是否为空
2. 考虑新数组跟原数组的内容是否对应
3. 考虑处理完数组后是否可以正常保存
4. 实际需求有两种产品，两种产品更新方式有区分

总结：
拿到业务需求先将需求解析成前端的知识，再去着手写代码；
开发完后 列出比较明显的各种情况，自测以上情况再发版；
双重数组循环时注意遍历的次数；
一开始感觉有点绕，开发完后复盘代码发现只要思路清晰，其实也不难