优雅永不过时

1、Arrar.includes() 进行多条件选择

  不要再使用 a || b || c 了,使用[a, b, c].includes('目标')不香吗?

 

2、if (!status) return

  if (!status) return 或者 if (!status) throw new Error('抛出错误')

  摒弃if嵌套,逻辑结构更加明显

  throw new Error('抛出错误') 也可以跳出try catch,手动抛错,进入catch内容哦

 

3、对象字面量 或Map 代替Switch(更代替if嵌套)

  const IWant = ['亲情', '爱情', '自由', '健康'];

  function youWant(conditon) {

    return IWant[conditon] || '金钱';

  }

 或

  const IWant = new Map()

    .set('key1', [1,2,3])

    .set('key2', [4,5,6])

    .set('key3', [7,8,9])

  function youWant(condition) {

    return IWant.get(condition) || [];

  }

 

4、默认参数和解构

  以前

    function oldMan(condition) {

      if (condition && condition.value) {

        return condition.value;

      }

    }

  现在

    function handleSomeGuy({ value } = {}) {

      return value || '我很帅';

    }

 
5、Array.every() & Array.some() 匹配内容
  很简单不做阐述
 
 
6、新特性
  ?. 代替 &
    例如:a && a.b && a.b.c  === a?.b?.c;
  ?? 代替 ||
    例如:a ?? b  === a || b;
 

7、良好习惯类

  1、css禁止内联

    尽量使用css || less || scss, 更好维护和开发

  2、资源引入顺序

    a、第三方模块

    b、二方包

    c、自己工程里的绝对路径模块 : @xxx

    d、自己工程里的相对路径模块

    f、样式

  3、优先const,只有变量被重新赋值时才使用let

 

  4、不要使用new Number/String/Boolean  

      因为:不会有任何好处,还会导致变量成为 object 类型,可能引起 bug。
      例如:
         const IMissYou1 = 'you';
         const IMissYou2 = new String('you')
         IMissYou1 === IMissYou2  => false

  5、类型转换为【布尔值】建议使用 !!

  6、不要修改函数参数。这可能导致作为入参的原变量发生变化。

  7、是为假值的值有:

      false

      null

      undefined

      ''

      0

      NaN

   8、避免向react组件传递匿名函数:<Button onClick={() => {}} />

    因为放父组件重新render时,匿名函数会被重新定义,所以每次render传递给Button的onClick函数都是最新的

    Button也会重新render,造成不必要的浪费

 

待补充...

 

posted @ 2022-08-09 19:59  HandsomeGuy  阅读(136)  评论(0编辑  收藏  举报