优雅永不过时
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 || '我很帅';
}
7、良好习惯类
1、css禁止内联
尽量使用css || less || scss, 更好维护和开发
2、资源引入顺序
a、第三方模块
b、二方包
c、自己工程里的绝对路径模块 : @xxx
d、自己工程里的相对路径模块
f、样式
3、优先const,只有变量被重新赋值时才使用let
4、不要使用new Number/String/Boolean
5、类型转换为【布尔值】建议使用 !!
6、不要修改函数参数。这可能导致作为入参的原变量发生变化。
7、是为假值的值有:
false
null
undefined
''
0
NaN
8、避免向react组件传递匿名函数:<Button onClick={() => {}} />
因为放父组件重新render时,匿名函数会被重新定义,所以每次render传递给Button的onClick函数都是最新的
Button也会重新render,造成不必要的浪费
待补充...