优雅永不过时

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，造成不必要的浪费

　

待补充...