工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

工作時使用的是 React 框架,所以會有偏向性,僅代表個人認為的常用知識點,並不適用於所有人。

可選鏈

當要處理 object 型別時經常會遇到值可能會是 undefined 或者 null 的情形,就會需要多寫幾層去判斷,比如今天我有個 student object,並且在 student 中又有一個 score object:

carbon 6 1 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

因為現在 score 中的 English 是有值存在的所以不會有任何問題,但若是我們把 score 整個拔掉就會報錯:

carbon 5 2 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

通常我們會用以下幾種方式去預先做處理:

邏輯AND運算子

student 3 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

完整寫法如下:

carbon 4 3 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

三元條件運算子

student 5 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

完整寫法:

carbon 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

現在我們可以用可選鏈來改寫。

改用可選鏈

在不確定是否存在的層級後面加上 ?,當不存在時會回傳 undefined

carbon 3 2 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

完整寫法:

carbon 2 2 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

三元運算子

這個算是基礎了,但是很經常會需要使用還是提一下。

延續上一節提到的三元條件運算子的例子:

student 9 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

這個意思就代表若 student.scoretrue,將 student.score.English 賦給 english 變數,若是 false 則賦 undefined 給 english。

既然提到了這邊就補充一下 Javascript 中的真值(truthy)假值(falsy)

真值(truthy)

以下提到的皆為真值:

carbon 1 3 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

假值(falsy)

在 Javascript 中只有 8 個假值:

carbon 8 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

Moment.js

因為我工作的 project 經常性需要去處理時間的值,而時間的處理又有很多種方法以及格式需要考慮,最輕鬆的辦法就是用別人封裝好的庫,比如 Moment.js 這個時間庫。

https://momentjs.com/

時間格式

常見格式有:

carbon 2 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

轉換為 JS 日期

carbon 1 1 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

添加與減少時間

moment 中自帶添加與減少的函數讓你能夠更方便的處理時間:

減去的話就是將 add 函數改為 subtract 即可。

carbon 4 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

開始與結束時間

carbon 3 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

時間比較

判斷 A 時間是否在 B 時間之前:

carbon 4 1 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

判斷 A 時間與 B 時間是否相同:

carbon 5 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

判斷 A 時間是否在 B 時間之後:

carbon 6 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

判斷 A 時間是否與 B 時間相同或在之前:

carbon 7 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

判斷 A 時間是否與 B 時間相同或在之後:

carbon 1 2 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

判斷 C 時間是否在 A 與 B 之間:

carbon 2 1 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

語言與時區

如果希望輸出的是使用者時區以及語言,也有相對的函數來處理:

carbon 4 2 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

可以透過 tz 來給定時區:

carbon 5 1 工作時經常用到的 JS 知識點及技巧(1)-可選鏈、三元運算子、Moment.js

由於這個庫實在是封裝了太多函數一時半會也無法全部介紹完畢,有興趣可以去官方文檔查看:https://momentjs.com/docs/

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論