JS 4個超級實(shí)用的小技巧 提升開發(fā)效率
1、短路判斷
當(dāng)只需要簡單的if條件時,可使用此方法
let x = 0;
let foo = () => console.log('執(zhí)行了');
if(x === 0){
foo()
}
通過使用&&運(yùn)算符來實(shí)現(xiàn)同樣的if功能,如果&&之前的條件為false,則&&之后的代碼將不會執(zhí)行。
let x = 0;
let foo = () => console.log('執(zhí)行了');
x === 0 && foo()
還可增加更多的if條件,不過這也會增加語句的復(fù)雜性,不建議超過2個以上條件。
let x = 0;
let y = 0;
let foo = () => console.log('執(zhí)行了');
x === 0 && y === 0 && foo()
2、可選鏈操作符 ( ? )
我們經(jīng)常會判斷JS對象中是否存在某個key,因?yàn)橛袝r不確定后臺API返回的數(shù)據(jù)是否是正確的。
user對象中包含一個屬性name的對象,name對象有一個屬性firstName,使用user.name.firstName直接進(jìn)行判斷的話,如果name屬性不存在的話就會報(bào)錯,所以在判斷之前還需要判斷user.name是否存在,需要嵌套兩層if判斷。
let user = {
name : {
firstName : '傲夫靠斯'
}
}
if(user.name){
if(user.name.firstName){
console.log('user對象 包含 firstName 字段')
}
}
這時我們可以使用?操作符進(jìn)行簡化操作,如果user.name不存在,也將返回false,所以直接使用一層判斷
let user = {
name : {
firstName : '傲夫靠斯'
}
}
if(user.name?.firstName){
console.log('user對象 包含 firstName 字段')
}
3、空值合并操作符 ( ?? )
與if/else相比來說,三元運(yùn)算符更加簡短。如果邏輯簡單,使用起來很方便。
例如:
let user = {
name : {
firstName : '傲夫靠斯'
}
}
let foo = () => {
return user.name?.firstName ?
user.name.firstName :
'firstName 不存在'
}
console.log(foo())
首先使用?運(yùn)算符來判讀是否存在,存在即返回,不存在則返回false,進(jìn)入后面的邏輯
使用??運(yùn)算法使代碼更加精簡
let user = {
name : {
firstName : '傲夫靠斯'
}
}
let foo = () => {
return user.name?.firstName ??
'firstName 不存在'
}
console.log(foo())
4、return終止函數(shù)
下面函數(shù)判斷x的值,使用大量if else嵌套
let x = 1;
let foo = () => {
if(x < 1){
return 'x 小于 1'
} else {
if(x > 1){
return 'x 大于 1'
}else{
return 'x 等于 1'
}
}
}
console.log(foo())
這種if else嵌套可以刪除else條件來簡化代碼,因?yàn)?code>return語句將終止代碼執(zhí)行并返回函數(shù)。
let x = 1;
let foo = () => {
if(x < 1){
return 'x 小于 1'
}
if(x > 1){
return 'x 大于 '
}
return 'x 等于 1'
}
console.log(foo())
到此這篇關(guān)于JS 4個超級實(shí)用的小技巧 提升開發(fā)效率的文章就介紹到這了,更多相關(guān)4個實(shí)用JS小技巧 提升開發(fā)效率內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序開發(fā)一鍵登錄 獲取session_key和openid實(shí)例
這篇文章主要介紹了微信小程序開發(fā)一鍵登錄 獲取session_key和openid實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-11-11
JavaScript知識:構(gòu)造函數(shù)也是函數(shù)
構(gòu)造函數(shù)就是初始化一個實(shí)例對象,對象的prototype屬性是繼承一個實(shí)例對象。本文給大家分享javascript構(gòu)造函數(shù)詳解,對js構(gòu)造函數(shù)相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2021-08-08
微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例
這篇文章主要介紹了微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實(shí)現(xiàn)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09
微信小程序 數(shù)據(jù)遍歷的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 數(shù)據(jù)遍歷的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04

