分享11個(gè)常用JavaScript小技巧
更新時(shí)間：2022年06月01日 16:27:42 作者：前端榮耀
在我們的日常開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)遇到數(shù)字與字符串轉(zhuǎn)換，檢查對(duì)象中是否存在對(duì)應(yīng)值，條件性操作對(duì)象數(shù)據(jù)，過(guò)濾數(shù)組中的錯(cuò)誤值，等等這類處理。本文整理出了一些常用的小技巧，希望大家能喜歡
在我們的日常開(kāi)發(fā)過(guò)程中，我們經(jīng)常會(huì)遇到數(shù)字與字符串轉(zhuǎn)換，檢查對(duì)象中是否存在對(duì)應(yīng)值，條件性操作對(duì)象數(shù)據(jù)，過(guò)濾數(shù)組中的錯(cuò)誤值，等等這類處理。
在這里，整理出了一些常用的小技巧，這些技巧是我比較喜歡的，可以使我們的代碼更精簡(jiǎn)、更干凈，且非常實(shí)用。
1.通過(guò)條件判斷向?qū)ο筇砑訉傩?/h2>
const isValid = false;
const age = 18;
// 我們可以通過(guò)展開(kāi)運(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;
// 我們可以通過(guò)展開(kāi)運(yùn)算符向?qū)ο筇砑訉傩?
const person = {
id: 'ak001',
name: 'ak47',
...(isValid && {isActive: true}),
...((age > 18 || isValid) && {cart: 0})
}
console.log('person', person)2.檢查對(duì)象中是否存在某個(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
// 通過(guò)動(dòng)態(tài)key進(jìn)行解構(gòu)賦值
const extractKey = 'name';
const { [extractKey]: data } = product;
console.log('data:', data); // data: ak474.循環(huán)遍歷一個(gè)對(duì)象的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)避免訪問(wèn)對(duì)象屬性報(bào)錯(cuò)
const product = {
id: 'ak001',
name: 'ak47'
}
console.log(product.sale.isSale); // throw error
console.log(product?.sale?.isSale); // undefined注意: 在實(shí)際使用場(chǎng)景中，有些場(chǎng)景對(duì)于我們要獲取的屬性是非必需的，我們可以通過(guò)上面這種方式去避免報(bào)錯(cuò)出現(xiàn)；但是有些場(chǎng)景下一些屬性是必須的，不然就會(huì)影響我們的實(shí)際功能，這個(gè)時(shí)候還是盡量給出清晰的報(bào)錯(cuò)提示來(lái)解決這種錯(cuò)誤的出現(xiàn)。
6.檢查數(shù)組中falsy的值
const fruitList = ['apple', null, 'banana', undefined];
// 過(guò)濾掉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)算符針對(duì)的是falsy類的值 (0,’ ’, null, undefined, false, NaN)，而空值合并僅針對(duì)null和undefined生效；
11.通過(guò)!!進(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技巧的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用JavaScript動(dòng)態(tài)設(shè)置樣式實(shí)現(xiàn)代碼及演示動(dòng)畫
使用onmouseover和onmouseout事件實(shí)現(xiàn)不同的效果而且是使用js動(dòng)態(tài)實(shí)現(xiàn)，本文有利于鞏固你js與css方面的知識(shí)，感興趣的你可以了解下哦，希望本文對(duì)你有所幫助2013-01-01
本文給大家簡(jiǎn)單探討下Js數(shù)組排序函數(shù)sort()的用法和示例，有需要的小伙伴可以參考下。2015-06-06
這篇文章主要介紹了微信小程序中的列表切換功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
最新JS正則表達(dá)式驗(yàn)證郵箱和手機(jī)號(hào)實(shí)例(2022)
在前端開(kāi)發(fā)過(guò)程中,通過(guò)使用JS的正則表達(dá)式來(lái)校驗(yàn)輸入的郵箱或者手機(jī)號(hào)是否正確,這也是一個(gè)非常常見(jiàn)的業(yè)務(wù)情景需求,下面這篇文章主要給大家介紹了關(guān)于利用JS正則表達(dá)式驗(yàn)證郵箱和手機(jī)號(hào)的相關(guān)資料,需要的朋友可以參考下2022-08-08
js在操作DOM中存在著許多跨瀏覽器方面的坑，本文花了我將近一周的時(shí)間整理，我將根據(jù)實(shí)例整理那些大大小小的“坑”。2015-06-06
javascript網(wǎng)頁(yè)關(guān)閉時(shí)提醒效果腳本
當(dāng)頁(yè)面載入和關(guān)閉時(shí)會(huì)出現(xiàn)一些提示信息的代碼。方便提醒用戶，但不建議多用，讓人感到反感。2008-10-10
layui操作列按鈕個(gè)數(shù)和文字顏色的判斷實(shí)例
今天小編就為大家分享一篇layui操作列按鈕個(gè)數(shù)和文字顏色的判斷實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
String.prototype實(shí)現(xiàn)的一些javascript函數(shù)介紹
這篇文章主要是對(duì)String.prototype實(shí)現(xiàn)的一些javascript函數(shù)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了js中for in語(yǔ)句的用法講解,本文用多個(gè)實(shí)例講解了for in語(yǔ)句的用法及適合場(chǎng)景,需要的朋友可以參考下2015-04-04
史上最全JavaScript數(shù)組去重的十種方法（推薦）
這篇文章主要介紹了JavaScript數(shù)組去重的十種方法,利用元素的屬性和特性進(jìn)行不同的去重方法，并實(shí)例演示如何測(cè)試去重超大數(shù)組，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08