大家好,我是林三心,上一篇基礎很好?總結了38個ES6-ES12的開發技巧,倒要看看你能拿幾分?,為什么我要寫那一篇文章呢?因為群里兄弟,或者其他兄弟,他們在問我問題時,我發現他們使用的語法還停留在ES5的階段,所以我想總結一下我用過的ES6-ES12的語法,讓大家了解一下基本使用,有不足之處,請多多包涵。
今天,我寫這篇文章,還是因為一些兄弟在問我問時,我發現他們的代碼習慣貌似達不到合格水平,會寫很多冗余代碼,或者明明一行代碼就能搞定的,卻要寫好幾行代碼。所以我總結了我開發中,我認為達到及格水平的個代碼習慣。如果有不足之處,請多多指教。
我想寫這篇,是因為看過太多不符合規范的代碼,這是前幾天一位兄弟發的代碼
圖片
// 普通寫法let name = '林三心'if (condition) { name = '科比'}// 三元表達式let name = condition ? '林三心' : '科比'
// 普通寫法let name = '林三心'if (condition1) { if (condition2) { name = '科比' } else { name = '詹姆斯' }}// 多重三元表達式let name = condition1 ? '林三心' : condition2 ? '科比' : '詹姆斯'
你是否遇到過這種代碼,其實每個if判斷題里的內容都大致相同,如果判斷情況數量少還好,但是如果有幾百個的話,那這么寫真的太不優雅了
// 普通寫法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了)來優化一下
// map優化const map = { kobe: '科比', james: '詹姆斯', paul: '保羅', george: '喬治', curry: '庫里', durant: '杜蘭特'}var name = '林三心'// 通過某些操作獲得codeconst code = XXXXXXXXXX// 通過map查找name = map[code]
但是問題來了,JavaScript的對象的key只能是字符串啊,不能是其他類型,那如果遇到以下情況咋辦啊?
// 普通寫法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可以是任意類型
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)
可能你代碼遇到這情況,某些條件時需要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 === '保羅') { // 做對應的操作 } // 后續操作}
開發中會遇到多個值的或條件,例如
// 普通操作// 通過一頓操作獲得nameconst name = XXXXXXXif (name === '林三心' || name === '詹姆斯' || name === '科比' || name === '杜蘭特') { // 進行對應的操作}
上面的寫法是有缺陷的,萬一條件多了,那會很長很長,不優雅,咱們遇到這種情況,可以使用數組+includes來優化
// 優化操作// 通過一頓操作獲得nameconst name = XXXXXXXif (['林三心', '詹姆斯', '科比', '杜蘭特'].includes(name)) { // 進行對應的操作}
// 普通操作function fn(params) { // 對傳進來的params進行一頓操作 // 很多代碼 // 得出一個key if (key === 1) { return true } else { return false }}// 直接返回布爾值function fn(params) { // 對傳進來的params進行一頓操作 // 很多代碼 // 得出一個key return key === 1}
什么是假值,就是轉布爾值為false的稱為假值,例如null,undefined,0,NaN等
// 普通操作if (key === null) { // 進行對應操作}// 簡寫if (!key) { // 進行對應操作}
前幾天有一兄弟問我,想要把價格大于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 }// ]
不需要響應式的數據,也就是死數據,建議不要放在對象里,放在對象里他會進行響應式處理,浪費性能
data() { // 放在這 this.selects = [ {label: '選項一', value: 1}, {label: '選項二', value: 2}, {label: '選項三', value: 3} ] return { }; }
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 }
給按鈕加loading,防止用戶請求還沒回來時,重復點擊
<el-button :loading="loading" @click="fn"></el-button>fn() { this.loading = true // 進行請求操作 this.loading = false}
文本框如果不加防抖,是非常耗性能的,要養成一看到文本框,就自覺加防抖的好習慣
<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); };}
定時器和事件,在組件銷毀的時候需要清除一下,因為這些東西都是全局的,組件銷毀后,他們還存在內存中,會造成內存泄漏的問題
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; }) } }}
也許你碰到過這種多個條件的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 }}
咱們先對比下setDta和react的setState
我舉個例子哈
先看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 = '男'}// 最后一次性setDatathis.setData(model)
本文鏈接:http://www.www897cc.com/showinfo-26-76502-0.html養成15個好的代碼習慣,讓老大對你刮目相看
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: VR在工業培訓中的興起,讓明天更安全
下一篇: C++關鍵字詳解:程序之魂