撸码一年有余，渐渐的开始注意代码规范与代码质量，在看别人的代码中慢慢学习积累各种小而美的写法使代码优雅健壮。
三目运算
bad
const num = 20;
let str;
if (num > 10) {
str = 'is greater';
} else {
str = 'is lesser';
}
good
const num = 20;
let str = num>10 ? 'a':'b'
短路运算
在很多情况下可能会对某些参数进行判断来增加函数的健壮性
bad
let tem=null;
if (params !== null || params !== undefined || params !== '') {
tem = params;
}else{
tem='init'
}
good
let tem = params || ''init"
if判断某个变量是否为true时
bad
let likeJavaScript
if (likeJavaScript === true){
console.log("hello world")
}
good
let likeJavaScript
if (likeJavaScript){
}
此写法须注意
条件参数在做类型转换时是否为true
十进制指数
当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字
bad
let i=1000000
good
let i=1e7
对象属性简写
如果属性名与key名相同，则可以采用ES6的方法： const obj = { x:x, y:y };
bad
const obj={
x:x,
y:y
}
good
const obj={
x,
y
}
箭头函数简写
foo的传统写法固然是非常直观的能让人理解，但是在将函数作为参数传递的过程中就不是十分优雅了，而箭头函数就能良好的展示函参关系
bad
list.forEach(function(item) {
console.log(item.name);
});
good
list.forEach(item=>console.log(item));
箭头函数简写
foo的传统写法固然是非常直观的能让人理解，但是在将函数作为参数传递的过程中就不是十分优雅了，而箭头函数就能良好的展示函参关系
bad
list.forEach(function(item) {
console.log(item.name);
});
good
list.forEach(item=>console.log(item));
箭头函数内的隐式返回值简写
在箭头函数内有返回值时省略不必要的return
bad
const foo = () =>{
return 111
}
good
const foo = () =>(111)
给函数设置默认参数值
bad
function temFoo(a,b,c){
a = a||0;
b = b||0;
c = c||0;
}
good
function temFoo(a=0,b=0,c=0){
//...
}
解构赋值的简写方法
在平时的业务中，经常需要在组件和API中传递数组或对象字面量的数据，
bad
const store = this.props.store; const form = this.props.form;
const loading = this.props.loading; const errors = this.props.errors;
const entity = this.props.entity;
good
import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;
扩展运算符简写
bad
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()
good
// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];
强制参数简写
我们在编写某些函数时，有些参数是必传项，但是可能调用的同学没有传递该参数，我们一般会抛出异常
bad
function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}
good
mandatory = () => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory()) => {
return bar;
}
网友评论