良好的代码编写习惯，提高代码可读性、可维护性、性能好的代码习惯是很重要的，体现在三个方面：可读性可维护性提升性能

好的代码习惯是很重要的，体现在三个方面：

可读性
可维护性
提升性能

1、合理使用对象

多种条件(初始)

const a = 1
let res
switch (a) {
  case 1:
    res = 'one'
    break
  case 2:
    res = 'two'
    break
  // 超级多...
}
console.log(res) // one

利用对象(优化)

const a = 1
const map = {
  '1': 'one',
  '2': 'two',
  // ...
}
let res = map[a]

2、合理使用数组 + includes

多个或进行if判断(初始)

const a = 1

if (a === 1 || a === 2 || a === 3) {
  // ...
}

利用数组+includes(优化)

const a = 1

if ([1, 2, 3].includes(a)) {
  // ...
}

3. ES6 链判断运算符，读取对象深层属性

读取对象多层属性（初始）

// 错误写法
const status = userInfo.workOrder.taskList.task.status || ''

// 正确写法
 const status =
      (userInfo &&
        userInfo.workOrder &&
        userInfo.workOrder.taskList &&
        userInfo.workOrder.taskList.task &&
        userInfo.workOrder.taskList.task.status) || "";

使用链判断运算符?.短路机制，只要不符合条件就不会往下执行（优化）

const status = userInfo?.workOrder?.taskList?.task?.status || ''

4. ES6空值合并运算符（Null判断运算符），非空判断

多个判断条件（初始）

// (1)
if (value !== null && value !== undefined && value !== '') {
    ... 
}

// (2) 值为 false 或 0 时，也总是返回 true，不符合实际需要
const status = order.status || true;

优化

// (1)
if((value??'') !== '') {
    ...
}
// (2)  只有值为null 或 undefined 时 才返回true
const status = order.status ?? true;

5. ES6 逻辑赋值运算符 ||= 和 &&=

老式写法（初始）

// (1)
user.name = user.name || 'default'

// (2)
if (x && x = y) { ... }

// (3)
x ?? (x = y)

使用或赋值运算符、与赋值运算符、Null赋值运算符，先运算，再赋值（优化）

// (1)
user.name ||= 'default' 

// (2)
if (x &&= y) { ... }

// (3)
x ??= y)

6、ES6默认参数

默认参数(初始)

const fn = (name) => {
  name = name || 'lili'
  console.log(name)
}

ES6默认参数(优化)

const fn = (name = 'lili') => {
  console.log(name)
}

7、嵌套解构赋值

链式取值(初始)

const obj = {
  eat: {
    breakfast: 'egg',
    dinner: 'meal'
  }
}

console.log(obj.eat.breakfast) // egg
console.log(obj.eat.dinner) // meal

嵌套解构(优化)，还可以设置新的属性名

const {
  eat: {
    breakfast,
    dinner：supper
  }
} = obj

console.log(breakfast) // egg
console.log(supper) // meal

8、三元代替if

if赋值(初始)

let player
let no = 24
if (no === 24) {
  player = 'kobe'
} else {
  player = 'james'
}

三元代替(优化)

let no = 24
const name = no === 24 ? 'kobe' : 'james'

9、多if的return

else if(初始)

const a = 1
const fn = () => {
  if (a === 1) {
    return 1
  } else if (a === 2) {
    return 2
  } else if (a === 3) {
    return 3
  }
}

if(优化)

const a = 1
const fn = () => {
  if (a === 1) {
    return 1
  }
  if (a === 2) {
    return 2
  }
  if (a === 3) {
    return 3
  }
}

10、if判断假值

===判断(初始)

if (key === null) {
  // 进行对应操作
}

自动转布尔值(优化)

if (key) {
  // 进行对应操作
}

11、定时器、绑定事件的清除

export default{
  data(){
    timer:null  
  },
  mounted(){
      this.timer = setInterval(()=>{
          // 具体执行内容
          console.log('1');
      },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}