我的代碼簡潔之道

1.通過條件判斷給變量賦值布爾值的正確姿勢

//?bad
if?(a?===?'a')?{
????b?=?true
}?else?{
????b?=?false
}

//?good
b?=?a?===?'a'

2.在if中判斷數(shù)組長度不為零的正確姿勢

//?bad
if?(arr.length?!==?0)?{
????//?todo
}

//?good
if?(arr.length)?{
????//?todo
}

3.同理，在if中判斷數(shù)組長度為零的正確姿勢

//?bad
if?(arr.length?===?0)?{
????//?todo
}

//?good
if?(!arr.length)?{
????//?todo
}

4.簡單的if判斷使用三元表達式

//?bad
if?(a?===?'a')?{
????b?=?a
}?else?{
????b?=?c
}

//?good
b?=?a?===?'a'???a?:?c

5.使用includes簡化if判斷

//?bad
if?(a?===?1?||?a?===?2?||?a?===?3?||?a?===?4)?{
????//?todo
}

//?good
let?arr?=?[1,?2,?3,?4]
if?(arr.includes(a))?{
????//?todo
}

巧用數(shù)組方法，盡量避免用for循環(huán)

6.使用some方法判斷是否有滿足條件的元素

//?bad
let?arr?=?[1,?3,?5,?7]
function?isHasNum?(n)?{
????for?(let?i?=?0;?i?????????if?(arr[i]?===?n)?{
????????????return?true
????????}
????}
????return?false
}

//?good
let?arr?=?[1,?3,?5,?7]
let?isHasNum?=?n?=>?arr.some(num?=>?num?===?n)

//?best
let?arr?=?[1,?3,?5,?7]
let?isHasNum?=?(n,?arr)?=>?arr.some(num?=>?num?===?n)

7.使用forEach方法遍歷數(shù)組，不形成新數(shù)組

//?bad
for?(let?i?=?0;?i?????//?todo
????arr[i].key?=?balabala
}

//?good
arr.forEach(item?=>?{
????//?todo
????item.key?=?balabala
})

8.使用filter方法過濾原數(shù)組，形成新數(shù)組

//?bad
let?arr?=?[1,?3,?5,?7],
????newArr?=?[]
for?(let?i?=?0;?i?????if?(arr[i]?>?4)?{
????????newArr.push(arr[i])
????}
}

//?good
let?arr?=?[1,?3,?5,?7]
let?newArr?=?arr.filter(n?=>?n?>?4)?//?[5,?7]

9.使用map對數(shù)組中所有元素批量處理，形成新數(shù)組

//?bad
let?arr?=?[1,?3,?5,?7],
????newArr?=?[]
for?(let?i?=?0;?i?????newArr.push(arr[i]?+?1)
}

//?good
let?arr?=?[1,?3,?5,?7]
let?newArr?=?arr.map(n?=>?n?+?1)?//?[2,?4,?6,?8]

巧用對象方法，避免使用for...in

10.使用Object.values快速獲取對象鍵值

let?obj?=?{
????a:?1,
????b:?2
}
//?bad
let?values?=?[]
for?(key?in?obj)?{
????values.push(obj[key])
}

//?good
let?values?=?Object.values(obj)?//?[1,?2]

11.使用Object.keys快速獲取對象鍵名

let?obj?=?{
????a:?1,
????b:?2
}
//?bad
let?keys?=?[]
for?(value?in?obj)?{
????keys.push(value)
}

//?good
let?keys?=?Object.keys(obj)?//?['a',?'b']

巧用解構簡化代碼

12.解構數(shù)組進行變量值的替換

//?bad
let?a?=?1,
????b?=?2
let?temp?=?a
a?=?b
b?=?temp

//?good
let?a?=?1,
????b?=?2
[b,?a]?=?[a,?b]

13.解構對象

//?bad
setForm?(person)?{
????this.name?=?person.name
????this.age?=?person.age?
}

//?good
setForm?({name,?age})?{
????this.name?=?name
????this.age?=?age?
}

14.解構時重命名簡化命名

有的后端返回的鍵名特別長，你可以這樣干

//?bad
setForm?(data)?{
????this.one?=?data.aaa_bbb_ccc_ddd
????this.two?=?data.eee_fff_ggg
}
//?good
setForm?({aaa_bbb_ccc_ddd,?eee_fff_ggg})?{
????this.one?=?aaa_bbb_ccc_ddd
????this.two?=?eee_fff_ggg
}

//?best
setForm?({aaa_bbb_ccc_ddd:?one,?eee_fff_ggg:?two})?{
????this.one?=?one
????this.two?=?two
}

15.解構時設置默認值

//?bad
setForm?({name,?age})?{
????if?(!age)?age?=?16
????this.name?=?name
????this.age?=?age?
}

//?good
setForm?({name,?age?=?16})?{
????this.name?=?name
????this.age?=?age?
}

16.||短路符設置默認值

let?person?=?{
????name:?'張三',
????age:?38
}

let?name?=?person.name?||?'佚名'

17.&&短路符判斷依賴的鍵是否存在防止報錯'xxx of undfined'

let?person?=?{
????name:?'張三',
????age:?38,
????children:?{
????????name:?'張小三'
????}
}

let?childrenName?=?person.children?&&?person.childre.name

18.字符串拼接使用${}

let?person?=?{
????name:?'LiMing',
????age:?18
}
//?bad
function?sayHi?(obj)?{
????console.log('大家好，我叫'?+?person.name?=?'，我今年'?+?person.age?+?'了')
}

//?good
function?sayHi?(person)?{
????console.log(`大家好，我叫${person.name}，我今年${person.age}了`)
}

//?best
function?sayHi?({name,?age})?{
????console.log(`大家好，我叫${name}，我今年${age}了`)
}

19.函數(shù)使用箭頭函數(shù)

let?arr?[18,?19,?20,?21,?22]
//?bad
function?findStudentByAge?(arr,?age)?{
????return?arr.filter(function?(num)?{
????????return?num?===?age
????})
}

//?good
let?findStudentByAge?=?(arr,?age)=>?arr.filter(num?=>?num?===?age)

20.函數(shù)參數(shù)校驗

//?bad
let?findStudentByAge?=?(arr,?age)?=>?{
????if?(!age)?throw?new?Error('參數(shù)不能為空')
????return?arr.filter(num?=>?num?===?age)
}

//?good
let?checkoutType?=?()?=>?{
????throw?new?Error('參數(shù)不能為空')
}
let?findStudentByAge?=?(arr,?age?=?checkoutType())?=>
????arr.filter(num?=>?num?===?age)

歡迎大佬們指正交流，感謝支持

歡迎自薦投稿到《前端技術江湖》，如果你覺得這篇內(nèi)容對你挺有啟發(fā)，記得點個?「在看」哦