如果存在该变量在显示

<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