条件判断语句 if 语句优化

• 多使用短路运算符替代

  不好的写法×××

  if (arr) {
    a = arr
  } else {
    a = []
  }
  
  if (attr in obj1) {
    obj2[attr] = obj1[attr]
  } 

  好的写法√

  a = a || []
  
  attr in obj1 && obj2[attr] = obj1[attr]

多使用模板字符串 `` (es6)

• 基础使用

  不好的写法×××

  const url = this.taskUrl + '/user' + this.userId + '/list'

  好的写法√

  const url = `${this.taskUrl}/user/${this.userId}/list`

• 在方法上的使用(有待深入)

  function desc(str, age) {
    return `${str[0]}已经${age}了`
  }
  const turtleDesc = desc`乌龟🐢${5}`

多使用解构赋值(es6)

• 定义变量

  不好的写法×××

  let name = persion.name
  let age = persion.age
  let sex = persion.sex
  let height = persion.height

  好的写法√

  let { 
    name,
    age,
    sex,
    height
  } = persion
  
  // 或
  let [a, b, c] = [1, 2, 3]

• 接收参数

  不好的写法×××

  function desc(persion) {
    return `${persion.name}是${persion.age}岁的${persion.sex}生`
  }

  好的写法√

  function desc({ name, age, sex }) {
    return `${persion.name}是${persion.age}岁的${persion.sex}生`
  }
  
  // 或
  function desc(persion) {
    const { name, age, sex } = persion
    return `${persion.name}是${persion.age}岁的${persion.sex}生`
  }

• 结构赋值+扩展运算符

  不好的写法×××

  // 对于对象
  const status = { speed: '60', hp: '80', color: 'green' }
  const dog = { name: 'dog' }
  dog[speed] = status[speed]
  dog[hp] = status[hp]
  dog[color] = status[color]
  
  // 对于数组
  const names = ['jared', 'jacky', 'jason']
  names.push('sky')
  names.push('ic')
  names.push('tt')

  好的写法√

  // 对象
  dog = { ...dog, ...status }
  // 或
  dog = { ...dog, status[hp] }
  
  // 数组
  names = [...names, 'sky', 'ic', 'tt'] // 相当于 push
  names = ['sky', 'ic', 'tt', ...names] // 相当于 unshift
  names = ['sky', ...names, 'tt', 'ic',] // 任意插入 末尾要带逗号

善用数组的方法

• reduce() es5

• map()

• filter() es5

  不好的写法×××

  const nums = [1,4,34, 23, 49, 5]
  
  let total = 0 // 求和
  const enlarge = [] // 放大一定倍数
  const highVale = [] // 大于30的所有值
  
  nums.forEach(item => {
    total += item
    enlarge.push(item * 2)
    if (item > 30) {
      highValue.push(item)
    } 
    // 当然 这步也可以写成优雅的写法 item > 30 && highValue.push(item)
  })

  好的写法√

  const total = nums.reduce((pre, cur) => pre + cur)
  const enlarge = nums.map(v => v * 2)
  const highValue = nums.filter(v => v > 30)

用 async / await (es7) 替代 Promise

• Promise的使用有可能会造成回调地狱的情况出现，es7的async / await很好的解决了这个问题

  async getData() {
    const { data } = await this.$get(this.taskUrl)
    console.log(data) // 用同步的方式写异步代码
  }

对象属性简写 (es6)

• 不指定属性名 直接写变量

  不好的写法×××

  let name = 'Tom', sex = 'cat', age = '18'
  const Tom = {
    name: name,
    sex: sex,
    age: age
  }

  好的写法√

  const Tom = {
    name,
    sex,
    age
  }