前端常见的代码逻辑优化处理

常见的代码逻辑优化处理

多条件判断

  // bad
  function filter(type) {
    if (type === 1 || type === 2 || type === 3 || type === 4 || ...) {
      console.log('条件成立了...')
    }
  }
  // good
  const types = [1, 2, 3, 4, ...]
  function filter(type) {
    if (types.includes(type)) {
      console.log('条件成立了...')
    }
  }

检查数组是否都满足某条件

  const data = [
    { name: 'a', age: 20 },
    { name: 'b', age: 28 },
    { name: 'c', age: 18 }
  ]
  // bad
  function filter(n) {
    let isAll = true
    data.forEach(({ age }) => {
      if (age > n) {
        isAll = false
      }
    })
    return isAll
  }
  // bad
  function filter(n) {
    const o = data.find(x => x.age > n)
    return o ? true : false
  }
  // good
  function filter(n) {
    return data.every(x => x.age > n)
  }

数组中某一项满足要求

  const data = [
    { name: 'a', age: 20 },
    { name: 'b', age: 28 },
    { name: 'c', age: 18 }
  ]
  // bad
  let isAge = false
  data.forEach(({ age }) => {
    if (age > 25) {
      isAge = true
    }
  })
  // good
  const isAge = data.some(({ age }) => age > 25)

对数组中匹配上的某个值进行解构

  const data = [
    { name: 'a', age: 20 },
    { name: 'b', age: 28 },
    { name: 'c', age: 18 }
  ]
  // bad
  const { name, age } = data.filter(({ age }) => age > 25)[0] || {}
  // good
  const { name, age } = data.find(({ age }) => age > 25) || {}

函数默认值

• 常用来接口请求给定默认请求方式

  // bad
  function f(m) {
    return m || 1
  }
  // good
  function f(m = 1) {
    return m
  }

解构匹配 - 可选链操作符

  const obj = { a: { b: { c: 1 } } }
  // bad
  const { a = {} } = obj
  const { b = {} } = a
  const { c } = b
  // good
  // 需要配置babel
  const m = a?.b?.c
  // bad
  <div>
    {
      (this.props.data || []).map(li => <span>{li}</span>)
    }
  </div>
  // good
  <div>
    {
      this.props?.data?.map(li => <span>{li}</span>)
    }
  </div>

多条件匹配

  // bad
  function pick(type) {
    if (type === 1) {
      return [0, 1]
    } else if (type === 2) {
      return [0, 1, 2]
    } else if (type === 3) {
      return [0, 3]
    } else {
      return []
    }
  }
  // bad
  function pick(type) {
    switch (type) {
      case 1:
        return [0, 1]
      case 2:
        return [0, 1, 2]
      case 3:
        return [0, 3]
      default:
        return []
    }
  }
  // good
  // 枚举法
  const fn = {
    1: [0, 1],
    2: [0, 1, 2],
    3: [0, 3]
  }
  const filter = fn[type] ?? []
  // good
  // map数据结构
  const fn = new Map()
    .set('1', [0, 1])
    .set('2', [0, 1, 2])
    .set('3', [0, 3])
  const filter = fn[type] ?? []

三元表达式优化

  // bad
  return (
    <>
      {
        isCheck ? (
          <div>check all</div>
        ) : null
      }
    </div>
  )
  // good
  if (!isCheck) return null
  return <div>check all</div>

数字转换中常见的错误处理 - ~~运算符

• 即使是数据错误，返回的数据类型不会影响后续数据格式的处理

  // bad
  function sum(num) {
    return +num + 1
  }
  // bad
  function sum(num) {
    return Number(num) + 1
  }
  sum('1.1')  // 2.1
  sum('1.1abc') // NaN
  // good
  function sum(num) {
    return ~~num + 1
  }
  sum('1.1')  // 2.1
  sum('1.1abc') // 1

错误处理 - try...catch...

  // bad
  function async fetchData() {
    const res = await getData({})
    const { success, response = [] } = res || {}
    if (success) {
      setData(response)
    }
  }
  // good
  function async fetchData() {
    try {
      const res = await getData({}) ?? []
      const { success, response = [] } = res
      if (success) {
        setData(response)
      }
    } catch (err) {
      console.log('error', const res = await getData({}))
    }
  }