Closed xccjk closed 1 year ago
// 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
// 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({})) } }
常见的代码逻辑优化处理
多条件判断
检查数组是否都满足某条件
数组中某一项满足要求
对数组中匹配上的某个值进行解构
函数默认值
解构匹配 - 可选链操作符
多条件匹配
三元表达式优化
数字转换中常见的错误处理 - ~~运算符
错误处理 - try...catch...