背景

冗杂的代码是一场灾难,对于后期的维护非常不友好,甚至可能会增加包的体积,影响页面初次下载的时间,所以为了在前端开发越来越精进,望大家对于代码质量上自己做好把控;由于公司每次代码上线都会有小伙伴之间相互代码评审的强制要求,所以下方的优化其实都是工作中高频遇到的问题,总想着哪天有时间能有个文档记录一下,
PS: 如有问题希指出

Javascript篇

switch语句 && 索引代码的优化

需求是年级回显,根据数字匹配搜索对应的明文字符;类似的需求还有回显星期和月份

1.简单的switch 实现,if else 实现以及三元实现代码不够简洁 (不推荐)
2.使用对象形式建立key-value映射关系&&map优化代码, 简单明了、

function grade(i){
    let _Map = new Map([
        [1, '一'],
        [2, '二'],
        [3, '三'],
        [4, '四'],
        [5, '五'],
        [6, '六'],
    ]);
    return _Map.get(i)?_Map.get(i)+'年级':'年级匹配不存在'
}

3.数组+索引优化代码

function grade(i){
    return  i>0 && i<8 ?['一','二','三','四','五','六','日'][i-1] + '年级':'年级匹配不存在'
}

默认值优化

用||代替三元写法

三元写法
function name(str) {
  return str? str : "erin"
}
优化||写法
function name(str) {
  return str || "erin"
}

单个if else带return,使用三元写法

/*传统写法*/
function test (bool) {
   if(bool) {
     return 1
   } else {
     return 0
   }
}
/*简洁三元写法*/
function test (bool) {
  return bool ? 1 : 0
}

多个if else多结果返回可以参照上方(3.数组+索引优化代码)

本文参考https://juejin.cn/post/684490...

学无止境,愿我在架构师的道路上越来越近


Erin
4 声望1 粉丝