養(yǎng)成15個好的代碼小習(xí)慣，讓老大對你刮目相看

原生JavaScript

1、三元代替if

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

// 三元表達(dá)式
let name = condition ? '林三心' : '科比'

2、多重三元表達(dá)式

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

// 多重三元表達(dá)式
let name = condition1 ? '林三心' : condition2 ? '科比' : '詹姆斯'

3、Map優(yōu)化多if

你是否遇到過這種代碼，其實每個if判斷題里的內(nèi)容都大致相同，如果判斷情況數(shù)量少還好，但是如果有幾百個的話，那這么寫真的太不優(yōu)雅了

// 普通寫法
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 = '杜蘭特'
}

像上面的情況，可以用對象(習(xí)慣稱為map了)來優(yōu)化一下

// map優(yōu)化
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 = '杜蘭特'
}

可以看到上面的判斷條件是數(shù)字和字符串混合的，這個時候就可以使用ES6的Map對象了，Map有一個區(qū)別于普通對象的特性就是，Map的key可以是任意類型

const map = new Map([
  [1, '一心一意'],
  [2, '雙龍戲珠'],
  [3, '三心二意'],
  [4, '四面楚歌'],
  ['curry', '庫里'],
  ['durant', '杜蘭特']
])
console.log(map)
// Map {
//   1 => '一心一意',
//   2 => '雙龍戲珠',
//   3 => '三心二意',
//   4 => '四面楚歌',
//   'curry' => '庫里',
//   'durant' => '杜蘭特'
// }

// 通過Map查找對應(yīng)的值
name = map.get(code)

4、多if的return

可能你代碼遇到這情況，某些條件時需要return，不執(zhí)行后續(xù)操作

// 普通做法
function fn() {
  // 通過一頓操作獲得name
  const name = XXXXXXX
  if (name === '林三心') {
    // 做對應(yīng)的操作
    return
  } else if (name === '科比') {
    // 做對應(yīng)的操作
    return
  } else if (name === '詹姆斯') {
    // 做對應(yīng)的操作
    return
  } else if (name === '利拉德') {
    // 做對應(yīng)的操作
  } else if (name === '保羅') {
    // 做對應(yīng)的操作
  }

  // 后續(xù)操作
}

以前我導(dǎo)師給我說這么做性能會好一些，說復(fù)雜度會低一些，性能更好，但是我現(xiàn)在忘了那個名詞叫啥了哈哈，哪位大哥評論區(qū)指出一下

// 復(fù)雜度更低，性能更高
function fn() {
  // 通過一頓操作獲得name
  const name = XXXXXXX
  if (name === '林三心') {
    // 做對應(yīng)的操作
    return
  }
  if (name === '科比') {
    // 做對應(yīng)的操作
    return
  }
  if (name === '詹姆斯') {
    // 做對應(yīng)的操作
    return
  }
  if (name === '利拉德') {
    // 做對應(yīng)的操作
  }
  if (name === '保羅') {
    // 做對應(yīng)的操作
  }

  // 后續(xù)操作
}

5、多個值的或條件

開發(fā)中會遇到多個值的或條件，例如

// 普通操作

// 通過一頓操作獲得name
const name = XXXXXXX
if (name === '林三心' || name === '詹姆斯' || name === '科比' || name === '杜蘭特') {
  // 進(jìn)行對應(yīng)的操作
}

上面的寫法是有缺陷的，萬一條件多了，那會很長很長，不優(yōu)雅，咱們遇到這種情況，可以使用數(shù)組+includes來優(yōu)化

// 優(yōu)化操作

// 通過一頓操作獲得name
const name = XXXXXXX
if (['林三心', '詹姆斯', '科比', '杜蘭特'].includes(name)) {
  // 進(jìn)行對應(yīng)的操作
}

6、函數(shù)執(zhí)行返回布爾值

// 普通操作
function fn(params) {
  // 對傳進(jìn)來的params進(jìn)行一頓操作
  // 很多代碼
  // 得出一個key
  if (key === 1) {
    return true
  } else {
    return false
  }
}

// 直接返回布爾值
function fn(params) {
  // 對傳進(jìn)來的params進(jìn)行一頓操作
  // 很多代碼
  // 得出一個key
  
  return key === 1
}

7、if判斷假值

什么是假值，就是轉(zhuǎn)布爾值為false的稱為假值，例如null，undefined，0，NaN等

// 普通操作
if (key === null) {
  // 進(jìn)行對應(yīng)操作
}

// 簡寫
if (!key) {
  // 進(jìn)行對應(yīng)操作
}

8、數(shù)組過濾

前幾天有一兄弟問我，想要把價格大于500的商品放在一個數(shù)組里，他是這么做的

// 普通操作
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 }
// ]

其實用數(shù)組的filter方法 + 箭頭函數(shù) + 對象解構(gòu)也就一行代碼的事情

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、不需要響應(yīng)式的數(shù)據(jù)

不需要響應(yīng)式的數(shù)據(jù)，也就是死數(shù)據(jù)，建議不要放在對象里，放在對象里他會進(jìn)行響應(yīng)式處理，浪費性能

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

10、數(shù)據(jù)處理完再掛載到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，防止用戶請求還沒回來時，重復(fù)點擊

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

fn() {
    this.loading = true
    // 進(jìn)行請求操作
    this.loading = false
}

12、文本框加防抖

文本框如果不加防抖，是非常耗性能的，要養(yǎng)成一看到文本框，就自覺加防抖的好習(xí)慣

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

import { debounce } from "@tools";
fn: debounce(function () {
        // 做相應(yīng)的事
    }, 300)
    
    
// tools
/**
 * 防抖函數(shù)
 * @param {Function} fn 回調(diào)函數(shù)
 * @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、定時器以及事件的清除

定時器和事件，在組件銷毀的時候需要清除一下，因為這些東西都是全局的，組件銷毀后，他們還存在內(nèi)存中，會造成內(nèi)存泄漏的問題

export default{
  data(){
    timer:null  
  },
  mounted(){
      this.timer = setInterval(()=>{
      //具體執(zhí)行內(nèi)容
      console.log('1');
        },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

當(dāng)然我們可以使用hook來優(yōu)化

export default{
  methods:{
    fn(){
      let timer = setInterval(()=>{
        //具體執(zhí)行代碼
        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>

上面那么寫真的不優(yōu)雅，也不好調(diào)試，利用computed吧

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

computed: {
    show () {
        // 在這里可以調(diào)試
        return this.name === '林三心' && this.age === 22 && this.state === 1
    }
}

小程序

15、多次setData合并

咱們先對比下setDta和react的setState

• setState：多次設(shè)置時，會通過自動合并來優(yōu)化性能，是異步的
• setData：沒有優(yōu)化，設(shè)置一次，就賦值一次，是同步的

我舉個例子哈

先看setState，他是做了性能優(yōu)化的

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

// 會自動合并成，性能優(yōu)化
this.setState({
    name: '林三心',
    age: 22,
    gender: '男'
})

但是小程序的setData是沒有上面的優(yōu)化的，所以咱們要自己手動合并一次，優(yōu)化性能

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

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

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

前端之神

一位前端小菜雞，寫過100多篇原創(chuàng)文章，全網(wǎng)有5w+個前端朋友，夢想是成為”前端之神“~

247篇原創(chuàng)內(nèi)容

公眾號