20個超級有用的 JavaScript 技巧

今天，我整理了20個很實用的 JavaScript 開發技巧，希望這些技巧能夠幫助你的學習與開發工作。

1. 初始化一個數組

如果你想初始化一個指定長度的一維數組并指定預設值，你可以這樣做。

const array = Array(6).fill(''); 
// ['', '', '', '', '', '']

如果你想初始化一個指定長度的二維數組并指定預設值，你可以這樣做。

const matrix = Array(6).fill(0).map(() => Array(5).fill(0)); 
// [[0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0]]

2. 數組求和，求最大值和最小值

const array  = [5,4,7,8,9,2];

求和

array.reduce((a,b) => a+b);

尋找最大值

array.reduce((a,b) => a > b ? a : b);  Math.max(...array)

尋找最小值

array.reduce((a,b) => a < b ? a : b);  Math.min(...array)

請記住：數組的reduce方法可以用來解決很多數組求值問題。

3.過濾錯誤值

如果要過濾數組中的值，例如 false、0、null、undefined 等，可以這樣做。

const array = [1, 0, undefined, 6, 7, '', false];
array.filter(Boolean);
// [1, 6, 7]

4. 使用邏輯運算符

如果有這樣的代碼片段：

if(a > 10) {
    doSomething(a)
}

可以使用邏輯運算符重寫。

a > 10 && doSomething(a)

5. 簡化判斷

如果有如下判斷。

if(a === undefined || a === 10 || a=== 15 || a === null) {
    //...
}

可以使用數組來簡化這種判斷。

if([undefined, 10, 15, null].includes(a)) {
    //...
}

這段代碼會簡潔很多，易于擴充，如果還需要再添加判斷，直接添加到數組中即可。

6.空數組

如果要清空數組，可以将數組的長度設定為 0。

let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0 
console.log(array)  // []

7. 計算性能

以下操作可用于計算代碼的性能。

const startTime = performance.now(); 
for(let i = 0; i < 1000; i++) {
    console.log(i)
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 10.3333333

8. 拼接陣列

如果我們想組合幾個數組，我們可以使用擴充運算符。

const start = [1, 2] 
const end = [5, 6, 7] 
const numbers = [9, ...start, ...end, 8] // [9, 1, 2, 5, 6, 7 , 8]

或者使用數組的 concat()方法。

const start = [1, 2, 3, 4] 
const end = [5, 6, 7] 
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]

但是，在使用concat()方法時，如果要合并的數組很大，那麼，concat()函數在建立單獨的新數組時會消耗大量記憶體。在這種情況下，可以使用以下方法來合并數組。

Array.prototype.push.apply(start, end)

9. 驗證 undefined 和 null

如果有這樣的代碼。

if(a === null || a === undefined) {
    doSomething()
}

也就是如果需要驗證一個值是否等于null或者undefined，可以使用null合并操作符來簡化上面的代碼。

a ?? doSomething()

這樣，僅當 a 未定義或為空時，才會執行控制合并運算符之後的代碼。空合并運算符 ??是一個邏輯運算符，當左側操作數為 null 或未定義時傳回其右側操作數，否則傳回左側操作數。

10. 将數組元素轉換為數字

如果有一個數組，并且你想将數組的元素轉換為數字，你可以使用 map 方法來完成。

const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number);  // [12, 1, 3.1415, -10.01]

這樣，map 對數組的每個元素執行 Number 構造函數，并在周遊數組時傳回結果。

11、将類數組轉換為數組

可以使用以下方法将類數組轉換為數組。

Array.prototype.slice.call(arguments);

此外，還可以使用擴充運算符來實作。

[...arguments]

12.對象屬性的動态聲明

如果你想動态地為一個對象聲明屬性，你可以這樣做。

const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }

13.縮短console.log()

每次debug都要寫很多console.log()會比較麻煩，可以用下面的形式來簡化這段代碼。

const c = console.log.bind(document) 
c(222) 
c("hello world")

這将每次隻執行 c 方法。

14.擷取查詢參數

如果我們想擷取 URL 中的參數，可以使用 window 對象的屬性。

window.location.search

如果一個 URL 是 google.com?project=js&type=1 那麼通過上面的操作你會得到 ?project=js&type=1。如果你想得到其中一個參數，你可以這樣做。

let type = new URLSearchParams(location.search).get('type');

15. 删除數組元素

如果我們想删除一個數組的元素，可以使用delete來完成，但是删除後元素會變成undefined，不會消失，而且執行會消耗很多時間，是以大部分情況下不會滿足我們的需求。是以我們可以使用數組的 slice() 方法來删除數組的元素。

const array = ["a", "b", "c", "d"] 
array.splice(0, 2) // ["a", "b"]

16.檢查對象是否為空

如果我們想檢查對象是否為空，我們可以使用以下内容。

Object.keys({}).length  // 0
Object.keys({key: 1}).length  // 1

Object.keys() 方法用于擷取對象的鍵，它将傳回一個包含這些鍵值的數組。如果傳回數組的長度為 0，則該對象必須為空。

17. 使用 switch case 替換 if/else

switch case 的性能比 if/else 好，而且代碼看起來更幹淨。

前：

if (1 == month) {days = 31;}
else if (2 == month) {days = IsLeapYear(year) ? 29 : 28;}
else if (3 == month) {days = 31;}
else if (4 == month) {days = 30;} 
else if (5 == month) {days = 31;} 
else if (6 == month) {days = 30;} 
else if (7 == month) {days = 31;} 
else if (8 == month) {days = 31;} 
else if (9 == month) {days = 30;} 
else if (10 == month) {days = 31;} 
else if (11 == month) {days = 30;} 
else if (12 == month) {days = 31;}

後：

switch(month) {
        case 1: days = 31; break;
        case 2: days = IsLeapYear(year) ? 29 : 28; break;
        case 3: days = 31; break;
        case 4: days = 30; break;
        case 5: days = 31; break;
        case 6: days = 30; break;
        case 7: days = 31; break;
        case 8: days = 31; break;
        case 9: days = 30; break;
        case 10: days = 31; break;
        case 11: days = 30; break;
        case 12: days = 31; break;
        default: break;
}

18. 擷取數組中的最後一項

如果要擷取數組中的最後一項，通常會這樣編寫代碼。

const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1]  // 5

其實，我們也可以使用數組的 slice 方法來擷取最後一個元素。

arr.slice(-1)

當我們将 slice 方法的參數設定為負值時，它會從數組後面開始截取數組值，如果要截取最後兩個值，則傳入參數-2。

19. 将值轉換為布爾值

在 JavaScript 中，以下所有值在布爾轉換時都轉換為 false，所有其他值都轉換為 true。

undefined
null
-0
NaN
“”

通常，如果我們想将顯式值轉換為布爾值，我們會使用 Boolean() 方法進行轉換。實際上，我們可以使用 !運算符将值轉換為布爾值。

我們知道一個！是将對象轉換為布爾值并反轉它，兩個！就是再次将逆布爾值取反，相當于直接将非布爾值轉換為布爾值。與 Boolean() 方法相比，此操作将具有更快的性能，因為它是本機計算機操作：

!!undefined // false
!!"996"     // true
!!null      // false
!!NaN       // false

20. 使用對象代替參數清單

當我們使用參數清單給函數傳遞參數的時候，參數少一點沒問題，但如果參數多，問題就更大了，因為我們必須按照參數清單的順序傳遞參數。如果你使用 TypeScript 編寫，那麼你還需要編寫使可選參數列在強制參數之後。

如果我們的函數參數比較多，可以考慮使用對象形式傳參。以對象形式傳遞參數時，傳遞可選參數不需要在最後，參數的順序也不重要。它也比參數清單更容易閱讀和了解通過對象傳遞的内容。

請參閱下面的示例。

function getItem(price, quantity, name, description) {}
getItem(15, undefined, 'bananas', 'fruit')

以下是如何使用對象傳遞。

function getItem(args) {
    const {price, quantity, name, description} = args
}
getItem({
    name: 'bananas',
    price: 10,
    quantity: 1, 
    description: 'fruit'
})

總結

以上就是我今天跟你分享的20個JavaScript的實用技巧，希望這些技巧對你有所幫助，如果你覺得有用的話，請記得點贊我，關注我，并将它分享給你身邊的朋友，也許能幫助到他。

20個超級有用的 JavaScript 技巧

繼續閱讀

代碼啟示

ArrayList學習

FZU 1063 三維掃描

資料結構之-數組

資料結構之數組資料結構之數組

ACdream 1162 胖子教你線段樹

POJ 3139 Balancing the Scale

iOS開發Tips3:循環的性能

1275.找出井字棋的獲勝者Java

【React】1020- React useEffect 使用指南

CodeChef PRIMEDST Prime Distance On Tree

力扣每日一練之數組下篇Day3

HDU 5719 Arrange

HDU 4609 3-idiots

HDU 1402 A * B Problem Plus

數組和類數組