if/else优化

优化 if/else 语句

当逻辑或||时，找到为 true 的分项就停止处理，并返回该分项的值，否则执行完，并返回最后分项的值。

当逻辑与&&时，找到为 false 的分项就停止处理，并返回该分项的值。

const a = 0 || null || 3 || 4
console.log(a) // 3

const b = 3 && 4 && null && 0
console.log(b) // null

减少 if / else地狱般的调用

const [age, name, sex] = [22, 'guodada', 1]

if (age > 10) {
  if (name === 'guodada') {
    if (sex > 0) {
      console.log('all right')
    }
  }
}

// better 使用 &&
if (age > 10 && name === 'guodada' && sex > 0) {
  console.log('all right')
}

// 或者(太长了不推荐)
age > 10 && name === 'guodada' && sex > 0 && console.log('all right')

提一下 react 的坑点, 在 render 中

render(){
  const arr = []
  return arr.length && null
}
// 渲染出 0 ！
// Boolean / undefind / null / NaN 等才不会渲染。我们可以使用 !! 强制转化为 boolean 解决这个问题
return !!arr.length && null

// 使用 && 控制组件的渲染
this.state.visible && <Modal />

使用 Array.includes 来处理多重条件：

const ages = [18, 20, 12]

if (age === 18 || age === 12) {
  console.log('match')
}

// better
if ([18, 12].includes(age)) {
  console.log('match')
}

如果是较少的判断逻辑则可以使用三元运算符：

const age = 22
const isAdult = age >= 18 ? true : false // 这里可以写为 const isAdult = age > 18

const type = age >= 18 ? 'adult' : 'child'

优化 switch/case 语句

switch/case 比 if/else 代码结构好点，但也和它一样有时十分冗长。

这里以自己实际项目中代码举例：
有时我们可能需要对不同类型的字段进行不一样的正则验证，防止用户错误地输入。譬如

const [type, value] = [1, '20']
/**
 * 根据 type 属性对输出进行验证
 * 1 0≤x≤50 整数
 * 2 -1000≤x≤2000 整数
 * 3 1≤x 整数
 */

function func1(type, value) {
  if (type === 1) {
    return /^(\d|[1-4]\d|50)$/.test(value)
  } else if (type === 2) {
    return /^-?(\d{1,3}|1000)$|^(-|1\d{3}|2000)$/.test(value)
  } else if (type === 3) {
    return /^[1-9]\d*$/.test(value)
  } else {
    return true
  }
}

func1(type, value)

// 使用 switch/case
function fun2(type, value) {
  switch (type) {
    case 1:
      return /^(\d|[1-4]\d|50)$/.test(value)
    case 2:
      return /^-?(\d{1,3}|1000)$|^(-|1\d{3}|2000)$/.test(value)
    case 3:
      return /^[1-9]\d*$/.test(value)
    default:
      return true
  }
}

func2(type, value)

我们如何巧妙的解决这个代码冗长的问题呢，如下：

function func3(type, value) {
  const limitMap = {
    1: /^(\d|[1-4]\d|50)$/g,
    2: /^-?(\d{1,3}|1000)$|^(-|1\d{3}|2000)$/,
    3: /^[1-9]\d*$/
  }
  return limitMap[type].test(value)
}

利用对象去匹配属性值，可以减少你的代码量，也使你的代码看起来更加简洁。你也可以使用 Map 对象去匹配。

function func4(type, value) {
  const mapArr = [
    [1, /^(\d|[1-4]\d|50)$/g],
    [2, /^-?(\d{1,3}|1000)$|^(-|1\d{3}|2000)$/],
    [3, /^[1-9]\d*$/]
  ]
  const limitMap = new Map(mapArr)
  return limitMap.get(type).test(value)
}

Map 是一种键值对的数据结构对象，它的匹配更加严格。它会区分开你传递的是字符串还是数字，譬如：

limitMap.get(1) // /^(\d|[1-4]\d|50)$/g
limitMap.get('1') // undefined