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屬性不存在的話就會報錯，所以在判斷之前還需要判斷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)文章
這篇文章主要為大家介紹了JS前端設(shè)計模式之發(fā)布訂閱模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了前端算法leetcode49-字母異位詞分組解題示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序 devtool隱藏的秘密的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 自動登陸PHP源碼實(shí)例并且附有源碼的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了JavaScript取消請求方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
微信小程序滾動Tab實(shí)現(xiàn)左右可滑動切換
這篇文章主要介紹了微信小程序滾動Tab實(shí)現(xiàn)左右可滑動切換的相關(guān)資料,這里提供實(shí)現(xiàn)實(shí)例幫助大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-08-08
詳解如何用js實(shí)現(xiàn)一個網(wǎng)頁版節(jié)拍器
這篇文章主要為大家介紹了詳解如何用js實(shí)現(xiàn)一個網(wǎng)頁版節(jié)拍器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
微信小程序 在Chrome瀏覽器上運(yùn)行以及WebStorm的使用
這篇文章主要介紹了微信小程序 在Chrome瀏覽器上運(yùn)行以及WebStorm的使用的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序 上傳頭像的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
微信小程序 （七）數(shù)據(jù)綁定詳細(xì)介紹
這篇文章主要介紹了微信小程序數(shù)據(jù)綁定詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09