大家好，我是林三心，上一篇基礎很好？總結了38個ES6-ES12的開發技巧，倒要看看你能拿幾分？，為什么我要寫那一篇文章呢？因為群里兄弟，或者其他兄弟，他們在問我問題時，我發現他們使用的語法還停留在ES5的階段，所以我想總結一下我用過的ES6-ES12的語法，讓大家了解一下基本使用，有不足之處，請多多包涵。AZ728資訊網——每日最新資訊28at.com

今天，我寫這篇文章，還是因為一些兄弟在問我問時，我發現他們的代碼習慣貌似達不到合格水平，會寫很多冗余代碼，或者明明一行代碼就能搞定的，卻要寫好幾行代碼。所以我總結了我開發中，我認為達到及格水平的個代碼習慣。如果有不足之處，請多多指教。AZ728資訊網——每日最新資訊28at.com

緣由

我想寫這篇，是因為看過太多不符合規范的代碼，這是前幾天一位兄弟發的代碼AZ728資訊網——每日最新資訊28at.com

圖片AZ728資訊網——每日最新資訊28at.com

原生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判斷題里的內容都大致相同，如果判斷情況數量少還好，但是如果有幾百個的話，那這么寫真的太不優雅了AZ728資訊網——每日最新資訊28at.com

// 普通寫法var name = '林三心'// 通過某些操作獲得codeconst code = XXXXXXXXXXif (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了)來優化一下AZ728資訊網——每日最新資訊28at.com

// map優化const map = {  kobe: '科比',  james: '詹姆斯',  paul: '保羅',  george: '喬治',  curry: '庫里',  durant: '杜蘭特'}var name = '林三心'// 通過某些操作獲得codeconst code = XXXXXXXXXX// 通過map查找name = map[code]

但是問題來了，JavaScript的對象的key只能是字符串啊，不能是其他類型，那如果遇到以下情況咋辦啊？AZ728資訊網——每日最新資訊28at.com

// 普通寫法var name = '林三心'// 通過某些操作獲得codeconst code = XXXXXXXXXXif (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可以是任意類型AZ728資訊網——每日最新資訊28at.com

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，不執行后續操作AZ728資訊網——每日最新資訊28at.com

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

以前我導師給我說這么做性能會好一些，說復雜度會低一些，性能更好，但是我現在忘了那個名詞叫啥了哈哈，哪位大哥評論區指出一下AZ728資訊網——每日最新資訊28at.com

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

5、多個值的或條件

開發中會遇到多個值的或條件，例如AZ728資訊網——每日最新資訊28at.com

// 普通操作// 通過一頓操作獲得nameconst name = XXXXXXXif (name === '林三心' || name === '詹姆斯' || name === '科比' || name === '杜蘭特') {  // 進行對應的操作}

上面的寫法是有缺陷的，萬一條件多了，那會很長很長，不優雅，咱們遇到這種情況，可以使用數組+includes來優化AZ728資訊網——每日最新資訊28at.com

// 優化操作// 通過一頓操作獲得nameconst name = XXXXXXXif (['林三心', '詹姆斯', '科比', '杜蘭特'].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等AZ728資訊網——每日最新資訊28at.com

// 普通操作if (key === null) {  // 進行對應操作}// 簡寫if (!key) {  // 進行對應操作}

8、數組過濾

前幾天有一兄弟問我，想要把價格大于500的商品放在一個數組里，他是這么做的AZ728資訊網——每日最新資訊28at.com

// 普通操作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方法 + 箭頭函數 + 對象解構也就一行代碼的事情AZ728資訊網——每日最新資訊28at.com

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、不需要響應式的數據

不需要響應式的數據，也就是死數據，建議不要放在對象里，放在對象里他會進行響應式處理，浪費性能AZ728資訊網——每日最新資訊28at.com

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，防止用戶請求還沒回來時，重復點擊AZ728資訊網——每日最新資訊28at.com

<el-button :loading="loading" @click="fn"></el-button>fn() {    this.loading = true    // 進行請求操作    this.loading = false}

12、文本框加防抖

文本框如果不加防抖，是非常耗性能的，要養成一看到文本框，就自覺加防抖的好習慣AZ728資訊網——每日最新資訊28at.com

<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、定時器以及事件的清除

定時器和事件，在組件銷毀的時候需要清除一下，因為這些東西都是全局的，組件銷毀后，他們還存在內存中，會造成內存泄漏的問題AZ728資訊網——每日最新資訊28at.com

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

當然我們可以使用hook來優化AZ728資訊網——每日最新資訊28at.com

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

14、html中的v-if

也許你碰到過這種多個條件的v-ifAZ728資訊網——每日最新資訊28at.com

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

上面那么寫真的不優雅，也不好調試，利用computed吧AZ728資訊網——每日最新資訊28at.com

<div v-if="show"></div>computed: {    show () {        // 在這里可以調試        return this.name === '林三心' && this.age === 22 && this.state === 1    }}

小程序

15、多次setData合并

咱們先對比下setDta和react的setStateAZ728資訊網——每日最新資訊28at.com

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

我舉個例子哈AZ728資訊網——每日最新資訊28at.com

先看setState，他是做了性能優化的AZ728資訊網——每日最新資訊28at.com

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

但是小程序的setData是沒有上面的優化的，所以咱們要自己手動合并一次，優化性能AZ728資訊網——每日最新資訊28at.com

const model = { name: '林三心' }if (condition1) {    model.age = 22}if (condition2) {    model.gender = '男'}// 最后一次性setDatathis.setData(model)

AZ728資訊網——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-76502-0.html養成15個好的代碼習慣，讓老大對你刮目相看

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： VR在工業培訓中的興起，讓明天更安全

下一篇： C++關鍵字詳解：程序之魂