养成15个好的代码小习惯，让老大对你刮目相看

原生JavaScript

1、三元代替if

// 普通写法
let name = '林三心'
if (condition) {
  name = '科比'
}

// 三元表达式
let name = condition ? '林三心' : '科比'

2、多重三元表达式

// 普通写法
let name = '林三心'
if (condition1) {
  if (condition2) {
    name = '科比'
  } else {
    name = '詹姆斯'
  }
}

// 多重三元表达式
let name = condition1 ? '林三心' : condition2 ? '科比' : '詹姆斯'

3、Map优化多if

你是否遇到过这种代码，其实每个if判断题里的内容都大致相同，如果判断情况数量少还好，但是如果有几百个的话，那这么写真的太不优雅了

// 普通写法
var name = '林三心'
// 通过某些操作获得code
const code = XXXXXXXXXX
if (code === 'kobe') {
  name = '科比'
} else if (code = 'james') {
  name = '詹姆斯'
} else if (code === 'paul') {
  name = '保罗'
} else if (code === 'george') {
  name = '乔治'
} else if (code === 'curry') {
  name = '库里'
} else if (code === 'durant') {
  name = '杜兰特'
}

像上面的情况，可以用对象(习惯称为map了)来优化一下

// map优化
const map = {
  kobe: '科比',
  james: '詹姆斯',
  paul: '保罗',
  george: '乔治',
  curry: '库里',
  durant: '杜兰特'
}

var name = '林三心'
// 通过某些操作获得code
const code = XXXXXXXXXX
// 通过map查找
name = map[code]

但是问题来了，JavaScript的对象的key只能是字符串啊，不能是其他类型，那如果遇到以下情况咋办啊？

// 普通写法
var name = '林三心'
// 通过某些操作获得code
const code = XXXXXXXXXX
if (code === 1) {
  name = '一心一意'
} else if (code = 2) {
  name = '双龙戏珠'
} else if (code === 3) {
  name = '三心二意'
} else if (code === 4) {
  name = '四面楚歌'
} else if (code === 'curry') {
  name = '库里'
} else if (code === 'durant') {
  name = '杜兰特'
}

可以看到上面的判断条件是数字和字符串混合的，这个时候就可以使用ES6的Map对象了，Map有一个区别于普通对象的特性就是，Map的key可以是任意类型

const map = new Map([
  [1, '一心一意'],
  [2, '双龙戏珠'],
  [3, '三心二意'],
  [4, '四面楚歌'],
  ['curry', '库里'],
  ['durant', '杜兰特']
])
console.log(map)
// Map {
//   1 => '一心一意',
//   2 => '双龙戏珠',
//   3 => '三心二意',
//   4 => '四面楚歌',
//   'curry' => '库里',
//   'durant' => '杜兰特'
// }

// 通过Map查找对应的值
name = map.get(code)

4、多if的return

可能你代码遇到这情况，某些条件时需要return，不执行后续操作

// 普通做法
function fn() {
  // 通过一顿操作获得name
  const name = XXXXXXX
  if (name === '林三心') {
    // 做对应的操作
    return
  } else if (name === '科比') {
    // 做对应的操作
    return
  } else if (name === '詹姆斯') {
    // 做对应的操作
    return
  } else if (name === '利拉德') {
    // 做对应的操作
  } else if (name === '保罗') {
    // 做对应的操作
  }

  // 后续操作
}

以前我导师给我说这么做性能会好一些，说复杂度会低一些，性能更好，但是我现在忘了那个名词叫啥了哈哈，哪位大哥评论区指出一下

// 复杂度更低，性能更高
function fn() {
  // 通过一顿操作获得name
  const name = XXXXXXX
  if (name === '林三心') {
    // 做对应的操作
    return
  }
  if (name === '科比') {
    // 做对应的操作
    return
  }
  if (name === '詹姆斯') {
    // 做对应的操作
    return
  }
  if (name === '利拉德') {
    // 做对应的操作
  }
  if (name === '保罗') {
    // 做对应的操作
  }

  // 后续操作
}

5、多个值的或条件

开发中会遇到多个值的或条件，例如

// 普通操作

// 通过一顿操作获得name
const name = XXXXXXX
if (name === '林三心' || name === '詹姆斯' || name === '科比' || name === '杜兰特') {
  // 进行对应的操作
}

上面的写法是有缺陷的，万一条件多了，那会很长很长，不优雅，咱们遇到这种情况，可以使用数组+includes来优化

// 优化操作

// 通过一顿操作获得name
const name = XXXXXXX
if (['林三心', '詹姆斯', '科比', '杜兰特'].includes(name)) {
  // 进行对应的操作
}

6、函数执行返回布尔值

// 普通操作
function fn(params) {
  // 对传进来的params进行一顿操作
  // 很多代码
  // 得出一个key
  if (key === 1) {
    return true
  } else {
    return false
  }
}

// 直接返回布尔值
function fn(params) {
  // 对传进来的params进行一顿操作
  // 很多代码
  // 得出一个key
  
  return key === 1
}

7、if判断假值

什么是假值，就是转布尔值为false的称为假值，例如null，undefined，0，NaN等

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

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

8、数组过滤

前几天有一兄弟问我，想要把价格大于500的商品放在一个数组里，他是这么做的

// 普通操作
const arr = [
  { id: 1, name: '电视机', price: 999 },
  { id: 2, name: '牙刷', price: 100 },
  { id: 3, name: '桌子', price: 200 },
  { id: 4, name: '电脑桌', price: 500 },
  { id: 5, name: '键盘', price: 600 },
  { id: 6, name: '显示屏', price: 800 }
]

const res = []

for (let i = 0; i < arr.length; i++) {
  if (arr[i].price >= 500) {
    res.push(arr[i])
  }
}
console.log(res)

// [
//   { id: 1, name: '电视机', price: 999 },
//   { id: 4, name: '电脑桌', price: 500 },
//   { id: 5, name: '键盘', price: 600 },
//   { id: 6, name: '显示屏', price: 800 }
// ]

其实用数组的filter方法 + 箭头函数 + 对象解构也就一行代码的事情

const arr = [
  { id: 1, name: '电视机', price: 999 },
  { id: 2, name: '牙刷', price: 100 },
  { id: 3, name: '桌子', price: 200 },
  { id: 4, name: '电脑桌', price: 500 },
  { id: 5, name: '键盘', price: 600 },
  { id: 6, name: '显示屏', price: 800 }
]

const res = arr.filter(({ price }) => price >= 500)
console.log(res)
// [
//   { id: 1, name: '电视机', price: 999 },
//   { id: 4, name: '电脑桌', price: 500 },
//   { id: 5, name: '键盘', price: 600 },
//   { id: 6, name: '显示屏', price: 800 }
// ]

Vue

9、不需要响应式的数据

不需要响应式的数据，也就是死数据，建议不要放在对象里，放在对象里他会进行响应式处理，浪费性能

  data() {
    // 放在这
    this.selects = [
      {label: '选项一', value: 1},
      {label: '选项二', value: 2},
      {label: '选项三', value: 3}
    ]
    return { };
  }

10、数据处理完再挂载到data里

    fn() {
      const arr = [1, 3, 5, 2, 3, 8, 5]
      const filterArr = arr.filter(num => num > 3)
      this.res = filterArr
      const sortArr = filterArr.sort()
      this.res = sortArr()
    }
    
    
    
     fn() {
      const arr = [1, 3, 5, 2, 3, 8, 5]
      const res = arr.filter(num => num > 3).sort()
      this.res = res
    }

11、按钮加loading

给按钮加loading，防止用户请求还没回来时，重复点击

<el-button :loading="loading" @click="fn"></el-button>

fn() {
    this.loading = true
    // 进行请求操作
    this.loading = false
}

12、文本框加防抖

文本框如果不加防抖，是非常耗性能的，要养成一看到文本框，就自觉加防抖的好习惯

<el-input @input="fn" />

import { debounce } from "@tools";
fn: debounce(function () {
        // 做相应的事
    }, 300)
    
    
// tools
/**
 * 防抖函数
 * @param {Function} fn 回调函数
 * @param {Number} delay 时长
 */
export const debounce = (fn, delay) => {
    var timer;
    return function () {
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, args); // this 指向vue
        }, delay);
    };

}

13、定时器以及事件的清除

定时器和事件，在组件销毁的时候需要清除一下，因为这些东西都是全局的，组件销毁后，他们还存在内存中，会造成内存泄漏的问题

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

当然我们可以使用hook来优化

export default{
  methods:{
    fn(){
      let timer = setInterval(()=>{
        //具体执行代码
        console.log('1');
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}

14、html中的v-if

也许你碰到过这种多个条件的v-if

<div v-if="name === '林三心' && age === 22 && state === 1"></div>

上面那么写真的不优雅，也不好调试，利用computed吧

<div v-if="show"></div>

computed: {
    show () {
        // 在这里可以调试
        return this.name === '林三心' && this.age === 22 && this.state === 1
    }
}

小程序

15、多次setData合并

咱们先对比下setDta和react的setState

• setState：多次设置时，会通过自动合并来优化性能，是异步的
• setData：没有优化，设置一次，就赋值一次，是同步的

我举个例子哈

先看setState，他是做了性能优化的

this.setState({
    name: '林三心'
})
this.setState({
    age: 22
})
this.setState({
    gender: '男'
})

// 会自动合并成，性能优化
this.setState({
    name: '林三心',
    age: 22,
    gender: '男'
})

但是小程序的setData是没有上面的优化的，所以咱们要自己手动合并一次，优化性能

const model = { name: '林三心' }

if (condition1) {
    model.age = 22
}
if (condition2) {
    model.gender = '男'
}

// 最后一次性setData
this.setData(model)

前端之神

一位前端小菜鸡，写过100多篇原创文章，全网有5w+个前端朋友，梦想是成为”前端之神“~

247篇原创内容

公众号