第分享11個常用JavaScript小技巧目錄1.通過條件判斷向?qū)ο筇砑訉傩?.檢查對象中是否存在某個屬性3.解構(gòu)賦值4.循環(huán)遍歷一個對象的key和value5.使用可選鏈(Optionalchaining)避免訪問對象屬性報錯6.檢查數(shù)組中falsy的值7.數(shù)組去重8.檢查是否為數(shù)組類型9.數(shù)字字符串類型轉(zhuǎn)換10.巧用空值合并()11.通過!!進(jìn)行布爾轉(zhuǎn)換在我們的日常開發(fā)過程中，我們經(jīng)常會遇到數(shù)字與字符串轉(zhuǎn)換，檢查對象中是否存在對應(yīng)值，條件性操作對象數(shù)據(jù)，過濾數(shù)組中的錯誤值，等等這類處理。

在這里，整理出了一些常用的小技巧，這些技巧是我比較喜歡的，可以使我們的代碼更精簡、更干凈，且非常實用。

1.通過條件判斷向?qū)ο筇砑訉傩?/p>

constisValid=false;

constage=18;

//我們可以通過展開運算符向?qū)ο筇砑訉傩?/p>

constperson={

id:'ak001',

name:'ak47',

...(isValid{isActive:true}),

...((age18||isValid){cart:0})

console.log('person',person)

2.檢查對象中是否存在某個屬性

constperson={

id:'ak001',

name:'ak47'

console.log('name'inperson);//true

console.log('isActive'inperson);//false

3.解構(gòu)賦值

constproduct={

id:'ak001',

name:'ak47'

const{name:weaponName}=product;

console.log('weaponName:',weaponName);//weaponName:ak47

//通過動態(tài)key進(jìn)行解構(gòu)賦值

constextractKey='name';

const{[extractKey]:data}=product;

console.log('data:',data);//data:ak47

4.循環(huán)遍歷一個對象的key和value

constproduct={

id:'ak001',

name:'ak47',

isSale:false

Object.entries(product).forEach(([key,value])={

if(['id','name'].includes(key)){

console.log('key:',key,'value:',value)

//key:idvalue:ak001

//key:namevalue:ak47

5.使用可選鏈(Optionalchaining)避免訪問對象屬性報錯

constproduct={

id:'ak001',

name:'ak47'

console.log(product.sale.isSale);//throwerror

console.log(product.sale.isSale);//undefined

注意:在實際使用場景中，有些場景對于我們要獲取的屬性是非必需的，我們可以通過上面這種方式去避免報錯出現(xiàn)；但是有些場景下一些屬性是必須的，不然就會影響我們的實際功能，這個時候還是盡量給出清晰的報錯提示來解決這種錯誤的出現(xiàn)。

6.檢查數(shù)組中falsy的值

constfruitList=['apple',null,'banana',undefined];

//過濾掉falsy的值

constfilterFruitList=fruitList.filter(Boolean);

console.log('filterFruitList:',filterFruitList);

//filterFruitList:['apple','banana']

//檢查數(shù)組中是否有truthy的值

constisAnyFruit=fruitList.some(Boolean);

console.log('isAnyFruit:',isAnyFruit);//isAnyFruit:true

7.數(shù)組去重

constfruitList=['apple','mango','banana','apple'];

constuniqList=[...newSet(fruitList)]

console.log('uniqList:',uniqList);//uniqList:['apple','mango','banana']

8.檢查是否為數(shù)組類型

constfruitList=['apple','mango'];

console.log(typeoffruitList);//object

console.log(Array.isArray(fruiltList));//true

9.數(shù)字字符串類型轉(zhuǎn)換

constpersonId='007';

console.log('personId:',+personId,'type:',typeof+personId);

//personId:7type:number

constpersonId=119;

console.log('personId:',personId+'','type:',typeof(personId+''));

//personId:119type:string

10.巧用空值合并()

letdata=undefined'noData;

console.log('data:',data);//data:noData

data=null'noData';

console.log('data:',data);//data:noData

data=0null'noData';

console.log('data:',data);//data:noData

//當(dāng)我們根據(jù)變量自身判斷時

data='noData';

console.log('data:',data);//data:noData

和或（||）運算符的區(qū)別？\

或運算符針對的是falsy類的值(0,,null,undefined,false,NaN)，而空值合并僅針對null和undefined生效；

11.通過!!進(jìn)行布爾轉(zhuǎn)換

console.log('thisisnotempty:',!!'')

//t