養(yǎng)成15個(gè)好的代碼習(xí)慣，讓老大對(duì)你刮目相看
大家好，我是林三心，上一篇基礎(chǔ)很好？總結(jié)了38個(gè)ES6-ES12的開發(fā)技巧，倒要看看你能拿幾分？，為什么我要寫那一篇文章呢？因?yàn)槿豪镄值埽蛘咂渌值?，他們?cè)趩栁覇栴}時(shí)，我發(fā)現(xiàn)他們使用的語法還停留在ES5的階段，所以我想總結(jié)一下我用過的ES6-ES12的語法，讓大家了解一下基本使用，有不足之處，請(qǐng)多多包涵。
今天，我寫這篇文章，還是因?yàn)橐恍┬值茉趩栁覇枙r(shí)，我發(fā)現(xiàn)他們的代碼習(xí)慣貌似達(dá)不到合格水平，會(huì)寫很多冗余代碼，或者明明一行代碼就能搞定的，卻要寫好幾行代碼。所以我總結(jié)了我開發(fā)中，我認(rèn)為達(dá)到及格水平的個(gè)代碼習(xí)慣。如果有不足之處，請(qǐng)多多指教。
緣由
我想寫這篇，是因?yàn)榭催^太多不符合規(guī)范的代碼，這是前幾天一位兄弟發(fā)的代碼
圖片
原生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
你是否遇到過這種代碼，其實(shí)每個(gè)if判斷題里的內(nèi)容都大致相同，如果判斷情況數(shù)量少還好，但是如果有幾百個(gè)的話，那這么寫真的太不優(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 = '杜蘭特'
}像上面的情況，可以用對(duì)象(習(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的對(duì)象的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ù)字和字符串混合的，這個(gè)時(shí)候就可以使用ES6的Map對(duì)象了，Map有一個(gè)區(qū)別于普通對(duì)象的特性就是，Map的key可以是任意類型
const map = new Map([
[1, '一心一意'],
[2, '雙龍戲珠'],
[3, '三心二意'],
[4, '四面楚歌'],
['curry', '庫里'],
['durant', '杜蘭特']
])
console.log(map)
// Map {
// 1 => '一心一意',
// 2 => '雙龍戲珠',
// 3 => '三心二意',
// 4 => '四面楚歌',
// 'curry' => '庫里',
// 'durant' => '杜蘭特'
// }
// 通過Map查找對(duì)應(yīng)的值
name = map.get(code)4、多if的return
可能你代碼遇到這情況，某些條件時(shí)需要return，不執(zhí)行后續(xù)操作
// 普通做法
function fn() {
// 通過一頓操作獲得name
const name = XXXXXXX
if (name === '林三心') {
// 做對(duì)應(yīng)的操作
return
} else if (name === '科比') {
// 做對(duì)應(yīng)的操作
return
} else if (name === '詹姆斯') {
// 做對(duì)應(yīng)的操作
return
} else if (name === '利拉德') {
// 做對(duì)應(yīng)的操作
} else if (name === '保羅') {
// 做對(duì)應(yīng)的操作
}
// 后續(xù)操作
}以前我導(dǎo)師給我說這么做性能會(huì)好一些，說復(fù)雜度會(huì)低一些，性能更好，但是我現(xiàn)在忘了那個(gè)名詞叫啥了哈哈，哪位大哥評(píng)論區(qū)指出一下
// 復(fù)雜度更低，性能更高
function fn() {
// 通過一頓操作獲得name
const name = XXXXXXX
if (name === '林三心') {
// 做對(duì)應(yīng)的操作
return
}
if (name === '科比') {
// 做對(duì)應(yīng)的操作
return
}
if (name === '詹姆斯') {
// 做對(duì)應(yīng)的操作
return
}
if (name === '利拉德') {
// 做對(duì)應(yīng)的操作
}
if (name === '保羅') {
// 做對(duì)應(yīng)的操作
}
// 后續(xù)操作
}5、多個(gè)值的或條件
開發(fā)中會(huì)遇到多個(gè)值的或條件，例如
// 普通操作
// 通過一頓操作獲得name
const name = XXXXXXX
if (name === '林三心' || name === '詹姆斯' || name === '科比' || name === '杜蘭特') {
// 進(jìn)行對(duì)應(yīng)的操作
}上面的寫法是有缺陷的，萬一條件多了，那會(huì)很長很長，不優(yōu)雅，咱們遇到這種情況，可以使用數(shù)組+includes來優(yōu)化
// 優(yōu)化操作
// 通過一頓操作獲得name
const name = XXXXXXX
if (['林三心', '詹姆斯', '科比', '杜蘭特'].includes(name)) {
// 進(jìn)行對(duì)應(yīng)的操作
}6、函數(shù)執(zhí)行返回布爾值
// 普通操作
function fn(params) {
// 對(duì)傳進(jìn)來的params進(jìn)行一頓操作
// 很多代碼
// 得出一個(gè)key
if (key === 1) {
return true
} else {
return false
}
}
// 直接返回布爾值
function fn(params) {
// 對(duì)傳進(jìn)來的params進(jìn)行一頓操作
// 很多代碼
// 得出一個(gè)key
return key === 1
}7、if判斷假值
什么是假值，就是轉(zhuǎn)布爾值為false的稱為假值，例如null，undefined，0，NaN等
// 普通操作
if (key === null) {
// 進(jìn)行對(duì)應(yīng)操作
}
// 簡寫
if (!key) {
// 進(jìn)行對(duì)應(yīng)操作
}8、數(shù)組過濾
前幾天有一兄弟問我，想要把價(jià)格大于500的商品放在一個(gè)數(shù)組里，他是這么做的
// 普通操作
const arr = [
{ id: 1, name: '電視機(jī)', 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: '電視機(jī)', price: 999 },
// { id: 4, name: '電腦桌', price: 500 },
// { id: 5, name: '鍵盤', price: 600 },
// { id: 6, name: '顯示屏', price: 800 }
// ]其實(shí)用數(shù)組的filter方法 + 箭頭函數(shù) + 對(duì)象解構(gòu)也就一行代碼的事情
const arr = [
{ id: 1, name: '電視機(jī)', 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: '電視機(jī)', 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ù)，建議不要放在對(duì)象里，放在對(duì)象里他會(huì)進(jìn)行響應(yīng)式處理，浪費(fèi)性能
data() {
// 放在這
this.selects = [
{label: '選項(xiàng)一', value: 1},
{label: '選項(xiàng)二', value: 2},
{label: '選項(xiàng)三', 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，防止用戶請(qǐng)求還沒回來時(shí)，重復(fù)點(diǎn)擊
<el-button :loading="loading" @click="fn"></el-button>
fn() {
this.loading = true
// 進(jìn)行請(qǐng)求操作
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 時(shí)長
*/
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、定時(shí)器以及事件的清除
定時(shí)器和事件，在組件銷毀的時(shí)候需要清除一下，因?yàn)檫@些東西都是全局的，組件銷毀后，他們還存在內(nèi)存中，會(huì)造成內(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
也許你碰到過這種多個(gè)條件的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合并
咱們先對(duì)比下setDta和react的setState
- setState：多次設(shè)置時(shí)，會(huì)通過自動(dòng)合并來優(yōu)化性能，是異步的
- setData：沒有優(yōu)化，設(shè)置一次，就賦值一次，是同步的
我舉個(gè)例子哈
先看setState，他是做了性能優(yōu)化的
this.setState({
name: '林三心'
})
this.setState({
age: 22
})
this.setState({
gender: '男'
})
// 會(huì)自動(dòng)合并成，性能優(yōu)化
this.setState({
name: '林三心',
age: 22,
gender: '男'
})但是小程序的setData是沒有上面的優(yōu)化的，所以咱們要自己手動(dòng)合并一次，優(yōu)化性能
const model = { name: '林三心' }
if (condition1) {
model.age = 22
}
if (condition2) {
model.gender = '男'
}
// 最后一次性setData
this.setData(model)
