今天，我整理了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的實用技巧，希望這些技巧對你有所幫助，如果你覺得有用的話，請記得點贊我，關注我，并将它分享給你身邊的朋友，也許能幫助到他。
