20個對JavaScript 開發人員的超級有用的技巧

「來源： ｜web前端開發 ID：web_qdkf」

英文 | https：//javascript。plainenglish。io/20-awesome-tips-for-better-and-more-professional-coding-with-javascript-2becaedb5f9

翻譯 | 楊小二

JavaScript 是流行程式語言之一，也是許多開發人員最喜歡的語言之一。你可以用它構建 Web 或移動混合應用程式，甚至是機器人開發學習。該語言對於初學者來說，也不是那麼困難。

但是，你有一些現實生活中的問題需要在 JavaScript 中解決。其中一些你可以快速解決，而其中一些則很棘手。

今天，在本文中，我們將介紹 20 個技巧，這些技巧可以更好地編碼，以更好、更輕鬆地的方式解決 JavaScript 中的問題。這些技巧可能對專業開發人員有所幫助，但對新開發人員來說也會很有趣。

1、數字轉換字串/字串轉換數字

這個技巧很簡單，它可以幫助你將數字轉換為字串或將字串轉換為數字。檢視下面的程式碼示例以瞭解轉換的工作原理。

// number to stringlet num1 = 4let string1 = num1。toString（）；// string to numberlet string2 = “5”let num2 = Number（string2）

2、短迴圈

在 JavaScript 中，你通常知道編寫多行迴圈，但你卻很少使用編寫僅一行的短迴圈。想知道怎麼做？檢視下面的示例程式碼。

const ProgrammingLang = ［“JavaScript”， “Python”， “C++”， “Dart”， “Java”］// Long Loop Versionfor （let i = 0； i < ProgrammingLang。length； i++） {const lang = ProgrammingLang［i］；console。log（lang）；}// Short Loop Versionfor （let lang of ProgrammingLang） console。log（lang）；

3、效能計算

這個技巧將幫助你計算程式碼效能，與在 Google Chrome 上完成的效能計算相同。

const startTime = performance。now（）；something（）；const endTime = performance。now（）；console。log（“function took ${startTime - endTime} milliseconds”）；

4、以簡單的方式交換值

當你需要在沒有任何額外變數（如 temp）的情況下交換值時，這個技巧對你來說會很方便。這個技巧是交換值的一種簡單快捷的方法。

let a = 5； let b = 6；［a， b］ = ［b， a］console。log（a） // 6console。log（b） // 5

5、合併陣列

這個技巧將幫助你將數組合併為一個數組。檢視下面的程式碼以瞭解它是如何工作的。

const names1 = ［“Haider”， “John”， “Jessica”］；const names2 = ［“Ferb”， “Emma”， “Watson”］；const allnames = ［。。。names1， 。。。names2］；console。log（allnames）； // ［“Haider”， “John”， “Jessica”， “Ferb”， “Emma”， “Watson”］

6、以簡單的方式刪除重複項

這個技巧將幫助你在短時間內以簡單的方式從陣列中刪除所有重複項。

const fruits = ［“apple”， “mango”， “orange”， “apple”， “pineapple”， “pineapple”， “peach”， “mango”］const fruiteWithoutDupli = ［。。。new Set（fruits）］；console。log（fruiteWithoutDupli） // ［ “apple”， “mango”， “orange”， “pineapple”， “peach” ］

7、驗證給定的引數是數字

這個技巧將向你展示如何驗證你在函式中傳遞的引數是否為數字。

function isNumber（num）{ return ！isNaN（parseFloat（num）） && isFinite（num）；}isNumber（34） // trueisNumber（‘JavaScript’） // false

8、驗證給定引數是一個數組

本技巧將向你展示如何驗證在函式中傳遞的引數是否為陣列。

functionisArray（arr）{returnObject。prototype。toString。call（arr） === ‘［object Array］’ ；}isArray（［34］） // trueisArray（‘JavaScript’） // false

9、清空陣列

這是在一行程式碼中完全清空陣列的最酷技巧。檢視下面的程式碼以瞭解它是如何工作的。

var array1 = ［ “JavaScript”， “Python”， “C++” ］；array1。length = 0；console。log（array1） // ［］ array will become empty

10、從陣列中獲取最大值和最小值

本技巧將指導你以快速簡便的方式從陣列中查詢最小值和最大值。現在你不需要為此問題編寫長迴圈即可實現這一功能。

var numbers = ［1， 6， 2， 8， 10， 11 ，24， 3， 9］；var max = Math。max。apply（Math， numbers）； // 24var min = Math。min。apply（Math， numbers）； // 1

11、 陣列中的隨機項

在本技巧中，我將向你展示如何從陣列中獲取隨機項。這個隨機項可以是字串或整數或任何資料型別。

var items = ［1， 4， 5， 6， 7， 8］；var randomItem = items［Math。floor（Math。random（） * items。length）］；console。log（randomItem） // 4

12、錯誤處理

有時會出現不尋常的錯誤，並使開發人員處理這些錯誤成為一個問題。這個技巧在這方面很有用。我將向你展示如何在不終止整個程式的情況下使用 try-except 語句處理錯誤。

var items = ［1， 4， 5， 6， 7， 8］；try{console。log（items［2］）}catch （error）{console。log（“we got an error”）}

13、 縮短你的陣列

縮短陣列的一個好方法是使用長度方法。這個技巧將指導你使用長度方法來縮短陣列，我認為這是一種快速簡便的方法。但這一種破壞性的方式，這意味著你可能會丟失陣列中其他已刪除的元素。

var items = ［1， 4， 5， 6， 7， 8］；items。length = 4console。log（items） //［1， 4， 5， 6］

14、 避免在迴圈中使用 For —

你應該避免使用 for-in 迴圈。取而代之的是，你應該使用比 for-in 迴圈快得多的普通迴圈。

// for in loopvar numbers = ［1， 3， 4， 5］var sum = 0； for （var i in numbers） { sum += numbers［i］； }// instead use thisvar numbers = ［1， 3， 4， 5］var sum = 0； for（var i=0； i < numbers。length； i++）{ sum +=numbers［i］；}

15、使用map函式在陣列中迴圈

迴圈陣列是一個耗時且代價高昂的問題，但我們可以使用 map 函式以更快的方式完成此操作。本技巧將向你展示如何使用 map 函式迴圈遍歷陣列。

var squares = ［1，2，3，4］。map（function （val） { console。log（val）}）； // Output// 1// 2// 3// 4

16、逗號運算子

這個技巧將幫助你理解逗號運算子。逗號運算子 （，） 計算其每個運算元（從左到右）並返回最後一個運算元的值。

var a = 1var b = （a++， 3）console。log（a） // 2 value of ‘a’ is increamentedconsole。log（b） // 3

17、使用正則表示式替換所有字元

我們可以使用正則表示式替換字串中的所有字元。以下將向你展示如何做到這一點。

var string = “JavaScript”；

console。log（string。replace（/Script/， “code”））； //Javacode

18、陣列中所有值的總和

如你所知，我們必須使用迴圈來計算陣列中所有值的總和。但是，這個技巧將幫助你在沒有任何迴圈的情況下計算陣列值的總和。

var values = ［1， 2， 5， 6］；var sum = values。reduce（（x， y） => x + y）；console。log（sum）； // 14

19、 打亂陣列的元素

這個技巧很棒，將指導你如何以簡單的方式打亂陣列的元素。

var arr = ［1， 2， 3， 4， 5］；console。log（arr。sort（function（） {returnMath。random（） - 0。5}））； //［1， 4， 5， 2， 3］

20、等號 (== , ===)

在 JavaScript 中，我們不使用“==”來比較值或資料；我們總是使用“===”。如果你嘗試使用雙重賦值運算子，則會給你帶來問題。

// wrong wayif（22 == ‘22’）{console。log（true）}//correct wayif（22 === “22”）{console。log（true）}else{console。log（false）}

最後想法

好吧，我知道還有許多其他有關於JvavScript的技巧，但是，今天這20個技巧對我來說很有用（我認為它們對初學者開發人員很有幫助）。

如果我錯過了任何重要的JvavScript技巧，請在留言區告訴我，讓我知道，非常感謝。

在此，我希望你將來會發現這篇文章對你有所幫助。

祝你能夠快樂的編寫JavaScript！

學習更多技能