优雅编写前端代码

JS

includes方法判断

if(id == 1 || id == 2 || id == 3){
	// 处理相应逻辑
}
// 优化后
if([1, 2, 3].includes(id)){
	// 处理相应逻辑
}

缺点：判断变成绝等判断，若id为"1"时判断为false

三元运算符

if(id == 1){
	func1()
}else{
	func2()
}
// 优化
return id == 1? func1(): func2()

缺点：只能执行一条语句

|| 运算符

let id = info.id? info.id: "1"
// 优化后
let id = info.id || "1"

let flag = false
if(!flag){
	func()
}
// 优化
flag || func()

|| 运算符会执行到第一个为true的位置，若一直无true值，返回最后一个值

&& 运算符

let flag = true
if(flag){
	func()
}
// 优化后
flag && func()

&& 运算符会执行到第一个false的值，若一直为true，返回最后一个值

判断深层的字段是否有值时

// 判断存在userId时执行某语句
res = {
	code: "200",
	data: {
		userInfo: {
			userId: ""
		}
	},
	msg: ""
}
if(res.code == 200 && res.data && res.data.userInfo && res.data.userInfo.userId){
	func()
}
// 优化
// try-catch 缺点：不能知道是code不为200还是userId不存在
try{
	if(res.code == 200 && res.data.userInfo.userId){
		
	}
}catch(err) {
	
}
// ?. 可选链运算符
if(res.code == 200 && res?.data?.userInfo?.userId){
	
}

Promise.all 优化多个请求成功调用后执行代码

request1().then(() => {
	request2().then(() => {
		request3().then(() => {
			// 代码
		})
	})
})
// 优化
Promise.all([
	request1(),
	request2(),
	request3()
]).then(() => {
	// 代码
})
// 封装函数成异步
function func(){
	return new Promise((resolve, reject) => {
		setTimeout(() => {
		 	// 代码
		 	resolve()
		}, 1000)
	})
}