分享11個(gè)常用JavaScript小技巧
更新時(shí)間：2022年06月01日 16:27:42 作者：前端榮耀
在我們的日常開發(fā)過程中，我們經(jīng)常會遇到數(shù)字與字符串轉(zhuǎn)換，檢查對象中是否存在對應(yīng)值，條件性操作對象數(shù)據(jù)，過濾數(shù)組中的錯誤值，等等這類處理。本文整理出了一些常用的小技巧，希望大家能喜歡
在我們的日常開發(fā)過程中，我們經(jīng)常會遇到數(shù)字與字符串轉(zhuǎn)換，檢查對象中是否存在對應(yīng)值，條件性操作對象數(shù)據(jù)，過濾數(shù)組中的錯誤值，等等這類處理。
在這里，整理出了一些常用的小技巧，這些技巧是我比較喜歡的，可以使我們的代碼更精簡、更干凈，且非常實(shí)用。
1.通過條件判斷向?qū)ο筇砑訉傩?/h2>
const isValid = false;
const age = 18;
// 我們可以通過展開運(yùn)算符向?qū)ο筇砑訉傩?
const person = {
id: 'ak001',
name: 'ak47',
...(isValid && {isActive: true}),
...((age > 18 || isValid) && {cart: 0})
}
console.log('person', person)
const isValid = false;
const age = 18;
// 我們可以通過展開運(yùn)算符向?qū)ο筇砑訉傩?
const person = {
id: 'ak001',
name: 'ak47',
...(isValid && {isActive: true}),
...((age > 18 || isValid) && {cart: 0})
}
console.log('person', person)2.檢查對象中是否存在某個(gè)屬性
const person = {
id: 'ak001',
name: 'ak47'
}
console.log('name' in person); // true
console.log('isActive' in person); // false3.解構(gòu)賦值
const product = {
id: 'ak001',
name: 'ak47'
}
const { name: weaponName } = product;
console.log('weaponName:', weaponName); // weaponName: ak47
// 通過動態(tài)key進(jìn)行解構(gòu)賦值
const extractKey = 'name';
const { [extractKey]: data } = product;
console.log('data:', data); // data: ak474.循環(huán)遍歷一個(gè)對象的key和value
const product = {
id: 'ak001',
name: 'ak47',
isSale: false
}
Object.entries(product).forEach(([key, value]) => {
if(['id', 'name'].includes(key)) {
console.log('key:',key, 'value:',value)
}
})
// key: id value: ak001
// key: name value: ak475.使用可選鏈(Optionalchaining)避免訪問對象屬性報(bào)錯
const product = {
id: 'ak001',
name: 'ak47'
}
console.log(product.sale.isSale); // throw error
console.log(product?.sale?.isSale); // undefined注意: 在實(shí)際使用場景中，有些場景對于我們要獲取的屬性是非必需的，我們可以通過上面這種方式去避免報(bào)錯出現(xiàn)；但是有些場景下一些屬性是必須的，不然就會影響我們的實(shí)際功能，這個(gè)時(shí)候還是盡量給出清晰的報(bào)錯提示來解決這種錯誤的出現(xiàn)。
6.檢查數(shù)組中falsy的值
const fruitList = ['apple', null, 'banana', undefined];
// 過濾掉falsy的值
const filterFruitList = fruitList.filter(Boolean);
console.log('filterFruitList:', filterFruitList);
// filterFruitList:['apple', 'banana']
// 檢查數(shù)組中是否有truthy的值
const isAnyFruit = fruitList.some(Boolean);
console.log('isAnyFruit:', isAnyFruit); // isAnyFruit: true7.數(shù)組去重
const fruitList = ['apple', 'mango', 'banana', 'apple'];
const uniqList = [...new Set(fruitList)]
console.log('uniqList:', uniqList); // uniqList: ['apple', 'mango', 'banana']8.檢查是否為數(shù)組類型
const fruitList = ['apple', 'mango']; console.log(typeof fruitList); // object console.log(Array.isArray(fruiltList)); // true
9.數(shù)字&字符串類型轉(zhuǎn)換
const personId = '007';
console.log('personId:', +personId, 'type:', typeof +personId);
// personId: 7 type: number
const personId = 119;
console.log('personId:', personId + '', 'type:', typeof (personId + ''));
// personId: 119 type: string10.巧用空值合并(??)
let data = undefined ?? 'noData;
console.log('data:', data); // data: noData
data = null ?? 'noData';
console.log('data:', data); // data: noData
data = 0 ?? null ?? 'noData';
console.log('data:', data); // data: noData
// 當(dāng)我們根據(jù)變量自身判斷時(shí)
data ??= 'noData';
console.log('data:', data); // data: noData和或（||） 運(yùn)算符的區(qū)別？\
或運(yùn)算符針對的是falsy類的值 (0,’ ’, null, undefined, false, NaN)，而空值合并僅針對null和undefined生效；
11.通過!!進(jìn)行布爾轉(zhuǎn)換
console.log('this is not empty:', !!'')
// this is not empty: false
console.log('this is not empty:', !!'Data')
// this is not empty: true以上就是分享11個(gè)常用JavaScript小技巧的詳細(xì)內(nèi)容，更多關(guān)于JavaScript技巧的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
bootstrap fileinput實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了bootstrap fileinput實(shí)現(xiàn)文件上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這段時(shí)間看了下bootstrap的時(shí)間控件，發(fā)現(xiàn)使用起來還是很簡單的，趁著有時(shí)間的時(shí)候整理了一下，特此分享到腳本之家平臺，感興趣的朋友參考下2017-07-07
javascript瀏覽器用戶代理檢測腳本實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨avascript瀏覽器用戶代理檢測腳本實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)觸底加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JS實(shí)現(xiàn)導(dǎo)出Excel的五種方法詳解【附源碼下載】
這篇文章主要介紹了JS實(shí)現(xiàn)導(dǎo)出Excel的五種方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了基于table表格導(dǎo)出Excel文件的相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下2018-03-03
給你的網(wǎng)站加上代碼統(tǒng)計(jì)!常用的方法是直接加統(tǒng)計(jì)代碼到網(wǎng)頁,但你的網(wǎng)頁數(shù)量很多呢?2011-01-01
boostrap模態(tài)框二次彈出清空原有內(nèi)容的方法
今天小編就為大家分享一篇boostrap模態(tài)框二次彈出清空原有內(nèi)容的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文將對在網(wǎng)頁中引用js常會出現(xiàn)的問題進(jìn)行匯總，并提出解決問題的具體方案，有助于我們更好的學(xué)習(xí)和使用js，需要的朋友一起來看下吧2016-12-12
前端實(shí)現(xiàn)Word在線預(yù)覽功能詳解
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)Word在線預(yù)覽功能的相關(guān)資料,工作中經(jīng)常有時(shí)會遇到需要給用戶創(chuàng)建word文檔并實(shí)現(xiàn)word文檔在線預(yù)覽的需求,需要的朋友可以參考下2023-09-09
本文通過實(shí)例給大家分享了原生JS進(jìn)行前后端同構(gòu)的相關(guān)知識點(diǎn)以及相關(guān)代碼，有需要的朋友參考學(xué)習(xí)下。2018-04-04