携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

优化

或许不是最优，但一定比优化前的更优雅

---

拼接数组转成id数组，在转成拼接字符渲染

现需将 ['14_王五', '16_孙七', '13_李四'] 这样的拼接数组分别转化为id和name的数组（后端需要这样的格式），然后再转成上述样式的拼接的字符串进行前端显示。唉，web仔就是这样，如果有后端尽心竭力的将数据处理好给你，请你一定要善待他，多情他吃几顿烧烤。

const ccUser = ['14_王五', '16_孙七', '13_李四']

const changeUser = (list) => {
  const _result = {
    idList: [],
    nameList: [],
  }
  list.forEach((item) => {
    _result.idList.push(item.split('_')[0]);
    _result.nameList.push(item.split('_')[1]);
  })
  _result.idList = _result.idList.join(',');
  _result.nameList = _result.nameList.join(',');
  return _result;
}

console.log(changeUser(ccUser))   // { idList: '14,16,13', nameList: '王五,孙七,李四' }

let a = '14,16,13'
let b = '王五,孙七,李四' 

const changeJoinUser = (idList, nameList) => {
  let _list1 = idList.split(',');
  let _list2 = nameList.split(',');
  if(_list1.length === 0 || _list2.length===0){
    return [];
  }
 return _list1.map((item, index) => {
    return `${item}_${_list2[index]}`;
  })
}
​
console.log(changeJoinUser(a, b))   // [ '14_王五', '16_孙七', '13_李四' ]

---

将提交文件的某些字段重新汇编成对象

如：需要将上传文件的 name，group，path字段组合成新对象提交给后端,fileList 随上传文件数量改变。

只需遍历 fileList 长度即可，然后将需要的属性push 进新对象。

之前写法：创建个新对象，依据fileList 长度for循环，根据下标存进新数组里，写完后并不优雅

优化后：

  const sendFile = (sealFiles) => {
    return sealFiles.fileList.map((item) => ({
      name: item.name,
      group: item.response.data.group,
      path: item.response.data.path,
    }));
  };

---

Ant的Upload组件限制上传文件类型

限制上传文件类型，比如PDF

之前写法：依据上传文件的fileList数组，找到name属性，利用split(’.‘)[1] 截取文件类型.然后判断时候时候是想要的格式。

这种判断有个很大弊端，如果名字出现 客户.奇怪.命名.pdf 这种奇葩方式，那直接寄。

后面才用substr( -4 )，直接判断后面三位是不是pdf形式，但MDN一查，发现这API后续有被禁用的风险，所以转向substring，原理大致相同。

//优化前
file.name.split('.')[1]
//小优化，后续API可能被弃用
file.name.substr(-4)
//优化后
file.name.substring(file.name.length - 4, file.name.length) !== '.pdf'

一顿操作下来，觉得完美至极，一查文档，发现人家有内定的API可限制文件类型，靠！！我是🤡

持续更新...