目錄

• 1. 初始化陣列
• 2. 陣列求和、求最大值、最小值
• 3. 過濾錯誤值
• 4. 使用邏輯運算子
• 5. 判斷簡化
• 6. 清空陣列
• 7. 計算程式碼效能
• 8. 拼接陣列
• 9. 物件驗證方式
• 10. 驗證undefined和null
• 11. 陣列元素轉化為數字
• 12. 類陣列轉為陣列
• 13. 物件動態宣告屬性
• 14. 縮短console.log()
• 15. 獲取查詢引數
• 16. 數字取整
• 17. 刪除陣列元素
• 18. 檢查物件是否為空
• 19. 使用 switch case 替換 if/else
• 20. 獲取陣列中的最後一項
• 21. 值轉為布林值
• 22. 格式化 ON 程式碼
• 23. 避免使用eval()和with()
• 24. 函式引數使用物件而不是引數列表

1. 初始化陣列

如果想要初始化一個指定長度的一維陣列，並指定預設值，可以這樣：

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

如果想要初始化一個指定長度的二維陣列，並指定預設值，可以這樣：

const matrix = Array(6).fill(0).map(() => Array(5).fill(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,undefined,6,false];

array.filter(Boolean);
// [1,7]

4. 使用邏輯運算子

如果有一段這樣的程式碼：

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

可以使用邏輯運算子來改寫：

a > 10 && doSomething(a)

這樣寫就會簡潔很多，如果邏輯與&&操作符前面的值為假，就會發生短路操作，直接結束這一句的執行；如果為真，就會繼續執行&&後面的程式碼，並返回後面程式碼的返回值。使用這種方式可以減少很多if...else判斷。

5. 判斷簡化

如果有下面的這樣的一個判斷：

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

就可以使用陣列來簡化這個判斷邏輯：

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

這樣程式碼就會簡潔很多，並且便於擴充套件，如果還有需要等於a的判斷，直接在陣列中新增即可。

6. 清空陣列

如果想要清空一個數組，可以將陣列的length置於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); // 30.299999952316284

8. 拼接陣列

如果我們想要拼接幾個陣列，可以使用擴充套件運算子：

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

或者使用陣列的concat()方法：

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

但是使用concat()方法時，如果需要合併的陣列很大，那麼concat() 函式會在建立單獨的新陣列時消耗大量記憶體。這時可以使用以下方法來實現陣列的合併：

Array.push.apply(start,end)

通過這種方式就能在很大程度上較少記憶體的使用。

9. 物件驗證方式

如果我們有一個這樣的物件：

const parent = {
    child: {
      child1: {
        child2: {
          key: 10
      }
    }
  }
}

很多時候我們會這樣去寫，避免某一層級不存在導致報錯：

parent && parent.child && parent.child.child1 && parent.child.child1.child2

這樣程式碼看起來就會很臃腫，可以使用的可選鏈運算子：

parent?.child?.child1?.child2

這樣實現和效果和上面的一大長串是一樣的。​

可選鏈運算子同樣適用於陣列：

const array = [1,3];
array?.[5]

可選鏈運算子允許我們讀取位於連線物件鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。在引用為空(null 或者 undefined) 的情況下不會引起錯誤，該表示式短路返回值是 undefined。與函式呼叫一起使用時，如果給定的函式不存在，則返回 undefined。

10. 驗證undefined和null

如果有這樣一段程式碼：

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

也就是如果需要驗證一個值如果等於null或者undefined時，需要執行一個操作時，可以使用空值合併運算子來簡化上面的程式碼：

a ?? doSomething()

這樣，只有a是undefined或者null時，才會執行控制合併運算子後面的程式碼。空值合併操作符（??）是一個邏輯操作符，當左側的運算元為 null 或者 undefined 時，返回其右側運算元，否則返回左側運算元。

11. 陣列元素轉化為數字

如果有一個數組，想要把陣列中的元素轉化為數字，可以使用map方法來實現：

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

通過這種方式，map會在遍歷陣列時，對陣列的每個元素執行Number建構函式並返回結果。

12. 類陣列轉為陣列

可以使用以下方法將類陣列arguments轉化為陣列：

Array.prototype.slice.call(arguments);

除此之外，還可以使用擴充套件運算子來實現：

[...arguments]

13. 物件動態宣告屬性

如果想要給物件動態宣告屬性，可以這樣：

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

14. 縮短console.log()

每次進行除錯時書寫很多console.log()就會比較麻煩，可以使用以下形式來簡化這個程式碼：

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

這樣每次執行c方法就行了。

15. 獲取查詢引數

如果我們想要獲取URL中的引數，可以使用window物件的屬性：

window.location.search

如果一個URL為www.baidu.com?project=js&type=1 那麼通過上面操作就會獲取到?project=js&type=1。如果在想獲取到其中某一個引數，可以這樣：

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

16. 數字取整

如果有一個數字包含小數，我們想要去除小數，通過會使用math.floor、math.ceil或math.round方法來消除小數。其實可以使用~~運算子來消除數字的小數部分，它相對於數字的那些方法會快很多。

~~3.1415926  // 3

其實這個運算子的作用有很多，通常是用來將變數轉化為數字型別的，不同型別的轉化結果不一樣：

• 如果是數字型別的字串，就會轉化為純數字；
• 如果字串包含數字之外的值，就會轉化為0；
• 如果是布林型別，true會返回1，false會返回0；
  

除了這種方式之外，我們還可以使用按位與來實現數字的取整操作，只需要在數字後面加上|0即可：

23.9 | 0   // 23
-23.9 | 0   // -23

這個操作也是直接去除數字後面的小數。這個方法和上面方法類似，使用起來效能都會www.cppcns.com比Script的的API好很多。

17. 刪除陣列元素

如果我們想刪除陣列中的一個元素，我們可以使用delete來實現，但是刪除完之後的元素會變為undefined，並不會消失，並且執行時會消耗大量的時間，這樣多數情況下都不能滿足我們的需求。所以可以使用陣列的splice()方法來刪除陣列元素：

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

18. 檢查物件是否為空

如果我們想要檢查物件是否為空，可以使用以下方式：

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

Object.keys()方法用於獲取物件的 key，會返回一個包含這些key值的陣列。如果返回的陣列長度為0，那物件肯定為空了。

19. 使用 switch case 替換 if/else

switch case 相對於 if/else 執行效能更高，程式碼看起來會更加清晰。

ihttp://www.cppcns.comf (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...case來改寫：

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;
}

看起來相對來說簡潔了一點。可以根據情況，使用陣列或物件來改寫if...else。

20. 獲取陣列中的最後一項

如果想獲取陣列中的最後一項，很多時候會這樣來寫：

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

其實我們還可以使用陣列的slice方法來獲取陣列的最後一個元素：

arr.slice(-1)

當我們將slice方法的引數設定為負值時，就會從陣列後面開始擷取陣列值，如果我們想擷取後兩個值，引數傳入-2即可。

21. 值轉為布林值

在JavaScript中，以下值都會在布林值轉化時轉化為false，其他值會轉化為true：

• undefined
• null
• 0
• -0
• NaN
• ""
  

通常我們如果想顯式的值轉化為布林值，會使用Boolean()方法進行轉化。其實我們可以使用!!運算子來將一個值轉化我布林值。我們知道，一個！是將物件轉為布林型並取反，兩個！是將取反後的布林值再取反，相當於直接將非布林型別值轉為布林型別值。這種操作相對於Boolean()方法效能會快很多，因為它是計算機的原生操作：

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

22. 格式化 JSON 程式碼

相信大家都eWDEAlvt使用過JSON.stringify方法，該方法可以將一個 JavaScript 物件或值轉換為 JSON 字串。他的語法如下：

JSON.stringify(value,replacer,space)

它有三個引數:

• value：將要序列化成 一個 JSON 字串的值。
• replacer 可選：如果該引數是一個函式，則在序列化過程中，被序列化的值的每個屬性都會經過該函式的轉換和處理；如果該引數是一個數組，則只有包含在這個陣列中的屬性名才會被序列化到最終的 JSON 字串中；如果該引數為 null 或者未提供，則物件所有的屬性都會被序列化。
• space 可選：指定縮排用的空白字串，用於美化輸出（pretty-print）；如果引數是個數字，它代表有多少的空格；上限為10。該值若小於1，則意味著沒有空格；如果該引數為字串（當字串長度超過10個字母，取其前10個字母），該字串將被作為空格；如果該引數沒有提供（或者為 null），將沒有空格。
  

通常情況下，我們都寫一個引數來將一個 JavaScript 物件或值轉換為 JSON 字串。可以看到它還有兩個可選的引數，所以我們可以用這倆引數來格式化JSON程式碼：

console.log(JSON.stringify({ alpha: 'A',beta: 'B' },null,'\t'));

輸出結果如下：

23. 避免使用eval()和with()

• with() 會在全域性範圍內插入一個變數。因此，如果另一個變數具有相同的名稱，則可能會導致混淆並覆蓋該值。
• eval() 是比較昂貴的操作，每次呼叫它時，引擎www.cppcns.com都必須將原始碼轉換為可執行程式碼。
  

24. 函式引數使用物件而不是引數列表

當我們使用引數列表給函式傳遞引數時，如果引數較少還好，如果引數較多時，就會比較麻煩，因為我們必須按照引數列表的順序來傳遞引數。如果使用TypeScript來寫，那麼寫的時候還需要讓可選引數排在必選引數的後面。​

如果我們的函式引數較多，就可以考慮使用物件的形式來傳遞引數，物件的形式傳遞引數時，傳遞可選引數並不需要放在最後，並且引數的順序不在重要。與引數列表相比，通過物件傳遞的內容也更容易閱讀和理解。​

下面來看一個例子：

function getItem(price,quantity,name,description) {}

getItem(15,'bananas','fruit')

下面來使用物件傳參：

function getItem(args) {
    const {price,description} = args
}

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

到此這篇關於24個實用JavaScript 開發技巧的文章就介紹到這了,更多相關JavaScript 開發技巧內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！