JS推荐实践

1、用全局js常量代替魔法数字

在存量的老代码中往往能见到这种风格的代码：

function execute(params) {
  switch (params) {
    case '10':
      console.log('执行10逻辑')
      break
    case '20':
      console.log('执行20逻辑')
      break
    case '30':
      console.log('执行30逻辑')
      break
    default:
      break
  }
}

execute('10')

其中所谓的10、20、30往往取值与某个明确的数据字典key，如果没有注释，代码的可读性非常差，推荐使用js常量模拟枚举的效果。
如下，创建statusConst.js

const statusConst = Object.freeze({
  goodStatus: '10', // 优秀状态
  normalStatus: '20', // 正常状态
  badStatus: '30' // 异常状态
})

export {
  statusConst
}

在需要的地方进行引入，将原来的魔法数字改造成：

import { statusConst } from "./statusConst.js"
function execute2(params) {
  switch (params) {
    case statusConst.goodStatus:
      console.log('执行10逻辑')
      break
    case statusConst.normalStatus:
      console.log('执行20逻辑')
      break
    case statusConst.badStatus:
      console.log('执行30逻辑')
      break
    default:
      break
  }
}
console.log('执行execute2');
execute2(statusConst.goodStatus)

运行execute和execute2：

执行10逻辑
执行execute2
执行10逻辑

应用场景：所有根据数据字典KEY值进行动态校验或动态渲染的处都可以用JS常量代替魔法数字，提高代码的可读/可维护性。

2、运用 可选链运算符（?.）优雅判空

3、使用map()加join()从对象数组中获取提示信息

与Java的List流式操作类似

const userList = [
  {
    name: '毒敌大王',
    action: '尾后针'
  },
  {
    name: '黑风大王',
    action: '黑风之名'
  },
  {
    name: '二郎神',
    action: '令我欢喜'
  }
]

const allAction = userList.map(item => item.action).join(',')
console.log('allAction', allAction)

allAction 尾后针,黑风之名,令我欢喜
应用场景：前端校验对象数组，抽取某一属性组合进行提示。
…持续更新