JS 4個超級實用的小技巧 提升開發效率
1、短路判斷
當隻需要簡單的if條件時,可使用此方法
let x = 0; let foo = () => console.log('執行瞭'); if(x === 0){ foo() }
通過使用&&
運算符來實現同樣的if功能,如果&&之前的條件為false
,則&&之後的代碼將不會執行。
let x = 0; let foo = () => console.log('執行瞭'); x === 0 && foo()
還可增加更多的if條件,不過這也會增加語句的復雜性,不建議超過2個以上條件。
let x = 0; let y = 0; let foo = () => console.log('執行瞭'); x === 0 && y === 0 && foo()
2、可選鏈操作符 ( ? )
我們經常會判斷JS對象中是否存在某個key
,因為有時不確定後臺API返回的數據是否是正確的。
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終止函數
下面函數判斷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
語句將終止代碼執行並返回函數。
let x = 1; let foo = () => { if(x < 1){ return 'x 小於 1' } if(x > 1){ return 'x 大於 ' } return 'x 等於 1' } console.log(foo())
到此這篇關於JS 4個超級實用的小技巧 提升開發效率的文章就介紹到這瞭,更多相關4個實用JS小技巧 提升開發效率內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- python基礎入門之普通操作與函數(三)
- javascript數組includes、reduce的基本使用
- 在Django中創建自己的自定義用戶模型
- 在.NET Core 中使用 FluentValidation 進行規則驗證的方法
- typeScript入門基礎介紹