前端新手必看 code tips

1. 通过逻辑判断返回 true | false

const ok = condition ? true : false// good case  ~const ok = !!conditionif(condition){  return true}else{  return false}// good case  ~return !!condition

2. 整数除法比较, 避免产生浮点数

// bad case a/100 > b// good case  ~a > b * 100

3. if else -> switch case

// good case  ~if(a === 'something'){  /* doing */}else if(a === 'something1'){  ...}...else if(a === 'somethingN'){  ...}  // good case switch(a){   case 'something':       /* doing */     break;   case 'something1':       /* doing */     break;   ...   case 'somethingN':       /* doing */     break;   default:     break; }

4. 不要三元表达式嵌套

// bad case ~m === 'a'? 'a': m === 'b'? 'b': m === 'c'? 'c': m === 'd'? 'd': 'any'// good case ~switch case

5. 调试完, 不要留着console.log, 及时删除

6.数组映射成新数组用map

const data = [  { name: 'jerry' },  { name: 'tom' }]// 新手常见写法const newData = []for(let i; i< i.length; i++){  newData.push({nickName: data[i]]})}// good case  ~const newData = data.map(i => ({nickName: i['name']}))

7.数组过滤用filter

const data = [  { name: 'jerry', age: 10 },  { name: 'tom', age: 20 }]// 新手常见写法const newData = []for(let i; i< i.length; i++){  if(data[i].age > 10){    newData.push(data[i])  }}// good case  ~const newData = data.filter(i => i.age > 10)

8.字符串拼接用模板字符串

const str = name + '(' + workNo + ')'// good case  ~const str = `${name}(${workNo})` 

9. 非必要情况不用 let, var , 一路 const 到底

10. 不要到处写注释,但是特殊业务逻辑需写注释

11. 使用可选链安全访问变量属性和方法

a && a.b && a.b.c && a.b.c()// good case  ~a?.b?.c?.()


未完待续...

发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章