學習JavaScript一定要知道的3個小技巧
前言:
通常在 Angular
或 React 項目中,code review
時看到一些老式的 JavaScript
代碼,就會將開發人員歸類為初學者。但是,如果您知道以下 3 個技巧,您將被視為現代 JavaScript 的尤達大師。那麼,讓我們開始我們的旅程吧!
一、神奇的擴展運算符
擴展運算符(spread
)是三個點( … ), 可以說我在 JavaScript 中最喜歡的運算符瞭。我主要在以下 3 種情況下使用:
1.拷貝數組
const arr = [1, 2, 3, 4] const newArr = [...arr] console.log(newArr) // [1, 2, 3, 4]
2.合並數組
const numArr = [1, 2, 3, 4] const alphaArr = ['a', 'b', 'c'] const newArr = [...numArr, ...alphaArr] console.log(newArr) // [1, 2, 3, 4, 'a', 'b', 'c']
3.展開對象
const rectangle = { width: 10, height: 10 } const cube = { ...rectangle, length: 7 } console.log(cube) // {width: 10, height: 10, length: 7}
二、進行空檢查的最佳方法
你還記得你寫的第一個空檢查代碼嗎?當 JavaScript 還沒有現在這個完善時,我曾在我的舊代碼中這樣寫:
if (foo !== null && foo !== undefined) { }
後來,我的生命被簡單的 if 拯救!
if (foo) {}
隻要條件值 foo 不是下列值,都將為真值“
- null
- undefined
- NaN
- 空字符串 (“”)
- false
除瞭簡單的 if 之外,現代 JavaScript
的可選鏈操作符 ?. 與空值合並運算符 ?? 可以使我們的代碼更加簡潔
1.可選鏈操作符
可選鏈操作符是訪問嵌套對象屬性的安全方式。這意味著在訪問一長串對象屬性時,我們不必進行多次空檢查。當嘗試訪問可能不存在的對象屬性時,可選鏈操作符將會使表達式更短、更簡明
以下示例檢查客戶地址的郵政編碼是否為 null :
const client = { name: 'Liu Xing', address: { zipcode: '1234' } } // 老的取值方式 if (client && client.address && client.address.zipcode) {} // 更加現代的可選鏈操作符方式 if (client?.address?.zipcode) {}
2.空值合並運算符
空值合並操作符( ?? )是一個邏輯操作符,當左側的操作數為 null 或者 undefined
時,返回其右側操作數,否則返回左側操作數。
const defaultMessage = 'Hello JavaScript 之禪' const msg = defaultMessage ?? 'Hello Liu Xing'; console.log(msg); // Hello JavaScript 之禪'
如果 defaultMessage
是 null 或者 undefined
則將打印出 Hello Liu Xing
當我們按順序使用它時,它會變得更強大:
console.log(firstName ?? lastName ?? 'anonymous')
在這個例子中,如果 firstName
不是 null/undefined
,它將顯示 firstName, 否則,如果 lastName
不是 null/undefined
,它將顯示 lastName。 最後,如果它們都為 null/undefined
,它將顯示“anonymous
”。
三、使用 .map()、.reduce() 和 .filter()
接下來,談論函數式和反應式編程的強大技術!幾年前我第一次使用它時,它真的為我打開瞭一扇新的大門。 現在每次看到這些簡潔的代碼,我仍然被它的美麗所震撼。
今天我舉例介紹三個最常用的方法:map、reduce 和 filter。
在新冠疫情 之前,我們去巴黎度假。於是他們去超市買瞭些東西。他們買瞭食物和日用品。但是所有的物品都是歐元,他們想知道每件物品的價格以及他們食物的人民幣總成本。
鑒於 1 歐元等於 7.18 日元。
以傳統方式,我們將使用經典循環來完成:
const items = [ { name: 'pineapple', price: 2, type: 'food' }, { name: 'beef', price: 20, type: 'food' }, { name: 'advocate', price: 1, type: 'food' }, { name: 'shampoo', price: 5, type: 'other' } ] let sum = 0 const itemsInYuan = [] for (let i = 0; i < items.length; i++) { const item = items[i] item.price *= 7.18 itemsInYuan.push(item) if (item.type === 'food') { sum += item.price } } console.log(itemsInYuan) /* [ { name: 'pineapple', price: 14.36, type: 'food' }, { name: 'beef', price: 143.6, type: 'food' }, { name: 'advocate', price: 7.18, type: 'food' }, { name: 'shampoo', price: 35.9, type: 'other' } ] */ console.log(sum) // 165.14 現在我們來使用現在 JavaScript 提供的函數式編程方法來實現這個計算。 const itemsInYuan = items.map(item => { const itemInYuan = { ...item } itemInYuan.price *= 7.18 return itemInYuan }) const sum = itemsInYuan.filter(item => item.type === 'food').reduce((total, item) => total + item.price, 0)
上述示例使用 map 方法將歐元轉為日元,使用 filter 過濾掉非食品的項目,使用 reduce 來計算價格總和。
到此這篇關於學習JavaScript一定要知道的3個小技巧的文章就介紹到這瞭,更多相關JavaScript小技巧內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript常用數組去重的方法及對比詳解
- js將多維數組轉為一維數組後去重排序
- 24個實用JavaScript 開發技巧
- 27個JavaScript數組常見方法匯總與實例說明
- JavaScript中reduce()的用法實例