6個非常實用的JavaScript小技巧

JavaScript作為一門非常靈活的語言，在開發過程中同樣的功能會有很多實現方式。有些小技巧非常好用，不僅能節省開發時間，還能提高程式碼的可讀性，穩定性。最近整理了一些JavaScript的開發小技巧，和大家一起分享。

1。使用展開運算子。。。取代delete操作

前端開發中經常需要對非必要的欄位進行刪除，一般情況下大家會採用

delete

操作。舉個例子，需要刪除

屬性。

const res = { id： 101， name： ‘owen’}；delete res。id；console。log（res）； // { name： ‘owen’ }

這樣當然可以實現功能，但是不推薦這樣做。首先刪除物件屬性比較危險，可能導致一些莫名其妙的問題，這些問題往往會很難排查。另外修改了原物件，導致了部分資訊的丟失，如果後續需要複製物件或者恢復物件屬性會很困難。

推薦的做法是使用展開運算子

。。。

。

const res = { id： 101， name： ‘owen’}；const {id，。。。rest} = res；console。log（rest）； // { name： ‘owen’ }

2。使用Boolean過濾陣列中false類元素

藉助建構函式

Boolean

可以將陣列中 false 類的元素過濾掉。false 類指的是在轉換為布林型後為false的值，例如：空字串，undefined，null，0，NaN。

const res = ［0，3，4，‘’，true，false，null，undefined，‘test’］；const filterRes = res。filter（Boolean）；console。log（filterRes）； // ［ 3， 4， true， ‘test’ ］

3。使用物件作為函式引數

JavaScript的函式和其他語言的函式一樣，可以接收多個入參。比如下面的函式：

const func = function（name， age， sex）{}

如果有一天這個函式需要新增一個新引數

，則需要繼續擴充套件。

const func = function（name， age， sex， id）{}

為了保持相容性，引數

只能放到最後一位。僅新增引數還不夠安全，還需要為新增的引數設定預設值。

const func = function（name， age， sex， id = 0）{}// 或者const func = function（name， age， sex， id ）{ if （！id） { id = 0； }}

隨著引數的不斷擴充套件，需要處理的相容性問題越來越多。因此推薦的做法是使用物件作為引數，還是使用上面的例子，如果使用物件作為引數，函式引數就不需要修改。

const func = function（params）{ const { name， age， sex， id } = params；}func（{id：10}）

藉助物件的靈活性，引數的順序，個數，增減等都非常方便，對專案的影響也最小。

4。使用閱讀友好的方式表示數字

在開發中有時候會使用較大數值的常量，比如：億 - 100000000，一天的毫秒數：86400000，等等。這樣較大的數可讀性比較差，很難數清楚一共多少個零，更不清楚具體的數值了。

const num = 100000000； // 1億const ms = 86400000； // 一天內的毫秒數

推薦使用另一種可讀性好的方式表示數值：

const num = 100_000_000； // 1億// 或者const num = 1e8； // 1億const ms = 24 * 60 * 60 * 1000； // 一天內的毫秒數

這樣的寫法大大提高了程式碼的可讀性，而且對程式碼的執行沒有任何影響。

5。使用set進行陣列去重

Set

是 ES6 新增的一種資料型別，它的一大特點就是內部沒有重複元素。我們可以利用這一特點對陣列進行去重。

const arr = ［1，2，3，4，3，2，1］；const result = ［。。。 new Set（arr）］；console。log（result）； // ［ 1， 2， 3， 4 ］

除了使用展開運算子之外，還可以使用

Array。from

。

const arr = ［1，2，3，4，3，2，1］；const result = Array。from（new Set（arr））；console。log（result）； // ［ 1， 2， 3， 4 ］

6。日期格式化自動補0的小技巧

我們在處理日期展示的時候經常需要將時間戳轉換為格式化的日期，比較省力的方法是直接使用日期格式化的包，比如：moment。js。但是有時候你不想因為這個小需求引入一個包，或者你想用原生JavaScript實現格式化。可能的實現是這樣的：

const date = new Date（）；const year = date。getFullYear（）；const month = date。getMonth（） + 1；const day = date。getDate（）；const hour = date。getHours（）；const min = date。getMinutes（）；const ss = date。getSeconds（）；console。log（`${year}-${month}-${day} ${hour}：${min}：${ss}`）； // 2021-8-1 10：31：45

但是這樣還不符合格式，因為月份，日期，小時，分，秒有可能是一位數字，需要在數字前補0。所以上面的程式碼還需要修改一下：

const padZero = function（num）{ return num < 10 ？ `0${num}` ： num；}const date = new Date（）；const year = date。getFullYear（）；const month = date。getMonth（） + 1；const day = date。getDate（）；const hour = date。getHours（）；const min = date。getMinutes（）；const ss = date。getSeconds（）；console。log（`${year}-${padZero（month）}-${padZero（day）} ${padZero（hour）}：${padZero（min）}：${padZero（ss）}`）； // 2021-08-01 10：38：26

那除了上面的方法還有別的方式嗎？JavaScript作為一個非常靈活的語言，一定有其他的實現方式。今天就看到一個巧妙的解決辦法。

const date = new Date（）；const year = date。getFullYear（）；const month = ‘0’ + （date。getMonth（） + 1）；const day = ‘0’ + date。getDate（）；const hour = ‘0’ + date。getHours（）；const min = ‘0’ + date。getMinutes（）；const ss = ‘0’ + date。getSeconds（）；console。log（`${year}-${month。slice（-2）}-${day。slice（-2）} ${hour。slice（-2）}：${min。slice（-2）}：${ss。slice（-2）}`）； // 2021-08-01 13：43：29

先透過統一新增字首字元“0”，然後再統一擷取後兩位字元。這樣做確實很聰明，很好的達到了格式化的目的。

如果覺得本篇文章對你有幫助，請幫忙轉發~