CodeReview-应急某项目复盘一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

一个项目的解构，更多的像是小时候玩的拼装四驱车，而每个小的拼装零件就是组件；小的零件之间组成的区域比如底盘，发动机区域等是由多个零件拼装成的，这个就如同项目中的block块，是有多个组件拼装成的，里面也涉及一请求以及业务逻辑的处理，想清楚这个，对于一个项目开始的路由拆解比较有帮助。

项目，就是凭空的在心里，构建一座城堡🏰。

1.解构处理:

在一些通用的请求方法上面，根据请求的参数的不同，回包的字key键虽然的一样的，但数据的类型可能不一样，下面是例子：

type Params = {
  frontuiCn:string;
  formType?:string;
  uuid?:string;
  flowId?:string;
} | {
  operateId:string;
  formType?:string;
  uuid?:string;
  flowId?:string;
}  
/**
   * @function dispahcer请求
  */
  async getDispatcher(params:Params) {
    const result = await dispatcher({ ...params });
    this.dispahcerDatas = result;

    if (params.formType === 'form') {
      this.mixDispatcher = {
        ...result,
        ...result.property || {},
        tableCn: get(result, 'table.tableCn'),
        elementList: Object.values(result.elementList || {}),
        _elementList: result.elementList,
      };
    } else {
      this.mixDispatcher = result;
    }
  }

在有formType的时候，elementList是对象
在没有formType的时候，elementList是数组
此外，回包中可能还存在我们想要的键值处于较深层级的位置

处理方式:

通过解构的方式，将想要的值都摊平在同一个层级中，这样在后续使用的时候，直接通过解构的方式就能够获取到cosnt {c} = data，而不是通过a.b.c的形式

2.映射的使用:

对于通过接口获取的常量，在项目中可能会持续大量使用到的，建议创建一个映射文件，进行映射。

这样做的好处就是如果后端返回的常量被修改了，前端这里只需要修改映射文件中的值就可以了，而不是在全局中进行一个个的查找修改。

/**
 * 模板页面和路由的映射
 */
import { INDEX, DETAIL } from '@/router/yj-yuan/yuan.const';

export const templateMap = {
  // 值守系统
  yjtf_list: 'YjZhishouIndex', // 值守列表
  tfsj_form_dj: 'YjZhishouForm', // 值守登记
  tfsj_form_ll: 'YjZhishouDetail', // 值守浏览
  tfsj_form_xb: 'YjZhishouReport', // 事件续报
  tfsj_form_fk: 'YjZhishouTickling', // 事件反馈
  // 研判系统
  yjtf_sh_list: 'YjZhihuiShIndex', // 研判列表
  tfsj_form_bl: 'YjZhihuiDetail', // 研判审核页
  tfsj_form_ypll: 'YjZhihuiWatchDetail', // 研判详情
  tfsj_form_wxyd: 'YjSheheUnReact', // 未响应

  // 指挥系统
  wzsb_list: 'YjZhihuiZhResource', // 资源查询
  zydd_list: 'YjZhihuiZhDispatch', // 资源调度
  fabs_ewb_list: 'YjZhihuiZhPlan', // 方案部署
  fabs_ewb_dj: 'YjZhihuiZhPlanList', // 方案部署列表

  tfsj_form_pg: 'YjPingguForm', // 事件评估

  // 预案系统
  yj_ya_ynk: INDEX.name, // 预案关联
  yjyagl_form_dj: DETAIL.name,
};

3.`Es6`的使用

reduce的处理:

1.通过reduce--数组扁平化

function FlatArr(arr = []) {
    return arr.reduce((t, v) => t.concat(Array.isArray(v) ? FlatArr(v) : v), [])
}

使用:

const arr = [0, 1, [2, 3, 3], [4, 5, [6, 7, 7]], [8, [9, 10, [11, 12]]]];
FlatArr(arr); // [0, 1, 2, 3, 3, 4, 5, 6, 7, 7, 8, 9, 10, 11, 12]

2.数组转Map对象

//arr数组，key为想要作为map对象中键的属性   
function getArrMap(arr,key){
      return arr.reduce((acc,item)=>{
        acc[item[key]] = item;
        return acc;
      },{})
 }

使用:

    const Arr = [
      {
        name:'张三',
        data:{
          age:18,
          dept:'职员'
        }
      },
      {
        name:'李四',
        data:{
          age:18,
          dept:'学生'
        }
      },
      {
        name:'王五',
        data:{
          age:18,
          dept:'刺客'
        }
      }
    ]
    
    const res = getArrMap(Arr,'name');

打印结果如下:

3.reduce代替map或者filter

const arr = [0, 2, 4, 6];

// 代替map：[0, 4, 8, 12]
const a = arr.map(v => v * 2);
const b = arr.reduce((t, v) => [...t, v * 2], []);

// 代替filter：[2, 4, 6]
const c = arr.filter(v => v > 1);
const d = arr.reduce((t, v) => v > 1 ? [...t, v] : t, []);

// 代替map和filter：[4, 6]
const e = arr.map(v => v * 2).filter(v => v > 2);
const f = arr.reduce((t, v) => v * 2 > 2 ? [...t, v * 2] : t, []);

这里关于reduce的总结就先到这里，后续关于reduce的骚操作，笔者这里会持续添加进来的

CodeReview-应急某项目复盘

1.解构处理:

2.映射的使用:

3.Es6的使用

reduce的处理:

3.`Es6`的使用