如果存在该变量在显示
<span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
使用async await 方法 语法糖代替promise then catch
async function myFunction() {
try {
const {code,msg,data} = await somethingThatReturnsAPromise();
if(code === 200 ){
}else{
}
} catch (err) {
console.log(err);
}
}
使用解构获取对象中的变量
const {phone, code} = this
点击时间 判断布尔
@click="loginWay=false"
点击取反
@click="showPwd=!showPwd"
根据或关系显示不同的信息
{{userInfo.phone || '暂无绑定手机号'}}
img加载图片
<img :src="imgSource" :onerror="default"/>
data(){
return{
imgSource:require('图片路径')
default:'this.src="'+require('默认的图片路径')+'"'
}
}
使用简洁的语法
// 逻辑运算符
if (a == 1) {
b()
}
// 可以写成
a == 1 && b()
// 初始化变量
var a = obj || {}
// 三元运算符
var a = b % 2 == 0 ? 'even' : 'odd'
使用模板字符串
//bad
dom.innerHTML='Hello '
+ name
+ ',How you today?'
//good
dom.innerHTML=`Hello
${name}
How you today?`
合理使用下划线
doSomeThing(){} //外部调用接口
_doSomeThing(){} //内部调用接口
变量和常量
const ADD_TODO = 'add_todo' // 使用大写加下划线
函数
const func1 =()=>{} //使用箭头函数而不是function xx(){}
取变量 使用解构
const data = {name:'dys', age:1}
const {name = ' ', age = 0} = data //解构给默认值
//
const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;
使用函数式编程
//good
function extract(filterFn, mapFn, col) {
return col.filter(filterFn).map(mapFn) //尽量使用filter map reduce
}
//bad
function getData(col) {
var results = []
for (var i = 0; i < col.length; i++) {
if (col[i] && col[i].data) {
results.push(col[i].data)
}
}
return results
}
少写if else swtich 多用设计模式
使用默认变量替代短路运算或条件
//bad
function createMicrobrewery(name) {
const breweryName = name || 'Hipster Brew Co.'
// ...
}
//good
function createMicrobrewery(breweryName = 'Hipster Brew Co.') {
// ...
}
类型转化
// good
const val = Number(inputValue);
// good
const totalScore = String(this.reviewScore);
// good
const hasAge = Boolean(age);
注释
使用 // FIXME: 标注问题
// FIXME: shouldn't use a global here
使用 // TODO: 标注问题的解决方式。
// TODO: total should be configurable by an options param
比较运算符和等号
对象 被计算为 true
Undefined 被计算为 false
Null 被计算为 false
布尔值 被计算为 布尔的值
数字 如果是 +0、-0、或 NaN 被计算为 false, 否则为 true
字符串 如果是空字符串 '' 被计算为 false，否则为 true
需要回传多个值时，使用对象解构，而不是数组解构。
// good
function processInput(input) {
// then a miracle occurs
return { left, right, top, bottom };
}
// 调用时只选择需要的数据
const { left, right } = processInput(input);
更多参考 这个
优化if/else
单一条件判断 使用 三元表达式
多个单一条件判断使用swtich case
使用map或者使用多个条件map
