20個對JavaScript 開發(fā)人員的超級有用的技巧
// number to stringlet num1 = 4let string1 = num1.toString();// string to numberlet string2 = "5"let num2 = Number(string2)
2、短循環(huán)
在 JavaScript 中，你通常知道編寫多行循環(huán)，但你卻很少使用編寫僅一行的短循環(huán)。想知道怎么做？查看下面的示例代碼。
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、合并數(shù)組
這個技巧將幫助你將數(shù)組合并為一個數(shù)組。查看下面的代碼以了解它是如何工作的。
const names1 = ["Haider", "John", "Jessica"];const names2 = ["Ferb", "Emma", "Watson"];const allnames = [...names1, ...names2];console.log(allnames); // ["Haider", "John", "Jessica", "Ferb", "Emma", "Watson"]
6、以簡單的方式刪除重復項
這個技巧將幫助你在短時間內以簡單的方式從數(shù)組中刪除所有重復項。
const fruits = ["apple", "mango", "orange", "apple", "pineapple", "pineapple", "peach", "mango"]const fruiteWithoutDupli = [...new Set(fruits)];console.log(fruiteWithoutDupli) // [ "apple", "mango", "orange", "pineapple", "peach" ]
7、驗證給定的參數(shù)是數(shù)字
這個技巧將向你展示如何驗證你在函數(shù)中傳遞的參數(shù)是否為數(shù)字。
function isNumber(num){return !isNaN(parseFloat(num)) && isFinite(num);}isNumber(34) // trueisNumber('JavaScript') // false
8、驗證給定參數(shù)是一個數(shù)組
本技巧將向你展示如何驗證在函數(shù)中傳遞的參數(shù)是否為數(shù)組。
function isArray(arr){return Object.prototype.toString.call(arr) === '[object Array]' ;}isArray([34]) // trueisArray('JavaScript') // false
9、清空數(shù)組
這是在一行代碼中完全清空數(shù)組的最酷技巧。查看下面的代碼以了解它是如何工作的。
var array1 = [ "JavaScript", "Python", "C++" ];array1.length = 0;console.log(array1) // [] array will become empty
10、從數(shù)組中獲取最大值和最小值
本技巧將指導你以快速簡便的方式從數(shù)組中查找最小值和最大值?，F(xiàn)在你不需要為此問題編寫長循環(huán)即可實現(xiàn)這一功能。
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、 數(shù)組中的隨機項
在本技巧中，我將向你展示如何從數(shù)組中獲取隨機項。這個隨機項可以是字符串或整數(shù)或任何數(shù)據(jù)類型。
var items = [1, 4, 5, 6, 7, 8];var randomItem = items[Math.floor(Math.random() * items.length)];console.log(randomItem) // 4
12、錯誤處理
有時會出現(xiàn)不尋常的錯誤，并使開發(fā)人員處理這些錯誤成為一個問題。這個技巧在這方面很有用。我將向你展示如何在不終止整個程序的情況下使用 try-except 語句處理錯誤。
var items = [1, 4, 5, 6, 7, 8];try{console.log(items[2])}catch (error){console.log("we got an error")}
13、 縮短你的數(shù)組
縮短數(shù)組的一個好方法是使用長度方法。這個技巧將指導你使用長度方法來縮短數(shù)組，我認為這是一種快速簡便的方法。但這一種破壞性的方式，這意味著你可能會丟失數(shù)組中其他已刪除的元素。
var items = [1, 4, 5, 6, 7, 8];items.length = 4console.log(items) //[1, 4, 5, 6]
14、 避免在循環(huán)中使用 For —
你應該避免使用 for-in 循環(huán)。取而代之的是，你應該使用比 for-in 循環(huán)快得多的普通循環(huán)。
// 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函數(shù)在數(shù)組中循環(huán)
循環(huán)數(shù)組是一個耗時且代價高昂的問題，但我們可以使用 map 函數(shù)以更快的方式完成此操作。本技巧將向你展示如何使用 map 函數(shù)循環(huán)遍歷數(shù)組。
var squares = [1,2,3,4].map(function (val) {console.log(val)});// Output// 1// 2// 3// 4
16、逗號運算符
這個技巧將幫助你理解逗號運算符。逗號運算符 (,) 計算其每個操作數(shù)（從左到右）并返回最后一個操作數(shù)的值。
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、數(shù)組中所有值的總和
如你所知，我們必須使用循環(huán)來計算數(shù)組中所有值的總和。但是，這個技巧將幫助你在沒有任何循環(huán)的情況下計算數(shù)組值的總和。
var values = [1, 2, 5, 6];var sum = values.reduce((x, y) => x + y);console.log(sum); // 14
19、 打亂數(shù)組的元素
這個技巧很棒，將指導你如何以簡單的方式打亂數(shù)組的元素。
var arr = [1, 2, 3, 4, 5];console.log(arr.sort(function(){return Math.random() - 0.5})); //[1, 4, 5, 2, 3]
20、等號 (== , ===)
在 JavaScript 中，我們不使用“==”來比較值或數(shù)據(jù)；我們總是使用“===”。如果你嘗試使用雙重賦值運算符，則會給你帶來問題。
// wrong wayif(22 == '22'){console.log(true)}//correct wayif(22 === "22"){console.log(true)}else{console.log(false)}
最后想法
好吧，我知道還有許多其他有關于JvavScript的技巧，但是，今天這20個技巧對我來說很有用（我認為它們對初學者開發(fā)人員很有幫助）。
如果我錯過了任何重要的JvavScript技巧，請在留言區(qū)告訴我，讓我知道，非常感謝。
在此，我希望你將來會發(fā)現(xiàn)這篇文章對你有所幫助。
祝你能夠快樂的編寫JavaScript！
學習更多技能
請點擊下方公眾號
