JS 4個超級實用的小技巧 提升開發(fā)效率
更新時間：2021年09月29日 11:45:52 作者：傲夫靠斯
JS有很多小技巧可以使代碼更精簡、更簡單。今天主要分享4個技巧，在平時的工作中可以大大的縮短代碼量和開發(fā)時間。,需要的朋友可以參考下面文章內容喲
1、短路判斷
當只需要簡單的if條件時，可使用此方法
let x = 0;
let foo = () => console.log('執(zhí)行了');
if(x === 0){
foo()
}
通過使用&&運算符來實現(xiàn)同樣的if功能，如果&&之前的條件為false，則&&之后的代碼將不會執(zhí)行。
let x = 0;
let foo = () => console.log('執(zhí)行了');
x === 0 && foo()
還可增加更多的if條件，不過這也會增加語句的復雜性，不建議超過2個以上條件。
let x = 0;
let y = 0;
let foo = () => console.log('執(zhí)行了');
x === 0 && y === 0 && foo()
2、可選鏈操作符 ( ? )
我們經(jīng)常會判斷JS對象中是否存在某個key，因為有時不確定后臺API返回的數(shù)據(jù)是否是正確的。
user對象中包含一個屬性name的對象，name對象有一個屬性firstName，使用user.name.firstName直接進行判斷的話，如果name屬性不存在的話就會報錯，所以在判斷之前還需要判斷user.name是否存在，需要嵌套兩層if判斷。
let user = {
name : {
firstName : '傲夫靠斯'
}
}
if(user.name){
if(user.name.firstName){
console.log('user對象 包含 firstName 字段')
}
}
這時我們可以使用?操作符進行簡化操作，如果user.name不存在，也將返回false，所以直接使用一層判斷
let user = {
name : {
firstName : '傲夫靠斯'
}
}
if(user.name?.firstName){
console.log('user對象 包含 firstName 字段')
}
3、空值合并操作符 ( ?? )
與if/else相比來說，三元運算符更加簡短。如果邏輯簡單，使用起來很方便。
例如：
let user = {
name : {
firstName : '傲夫靠斯'
}
}
let foo = () => {
return user.name?.firstName ?
user.name.firstName :
'firstName 不存在'
}
console.log(foo())
首先使用?運算符來判讀是否存在，存在即返回，不存在則返回false，進入后面的邏輯
使用??運算法使代碼更加精簡
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條件來簡化代碼，因為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())
到此這篇關于JS 4個超級實用的小技巧 提升開發(fā)效率的文章就介紹到這了,更多相關4個實用JS小技巧 提升開發(fā)效率內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了JS前端設計模式之發(fā)布訂閱模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了前端算法leetcode49-字母異位詞分組解題示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序 devtool隱藏的秘密的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 自動登陸PHP源碼實例并且附有源碼的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家介紹了JavaScript取消請求方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序滾動Tab實現(xiàn)左右可滑動切換的相關資料,這里提供實現(xiàn)實例幫助大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-08-08
詳解如何用js實現(xiàn)一個網(wǎng)頁版節(jié)拍器
這篇文章主要為大家介紹了詳解如何用js實現(xiàn)一個網(wǎng)頁版節(jié)拍器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
微信小程序 在Chrome瀏覽器上運行以及WebStorm的使用
這篇文章主要介紹了微信小程序 在Chrome瀏覽器上運行以及WebStorm的使用的相關資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序 上傳頭像的實例詳解的相關資料,希望通過本文能幫助到大家，讓大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了微信小程序數(shù)據(jù)綁定詳細介紹的相關資料,需要的朋友可以參考下2016-09-09