12個可以讓你像專業(yè)人士一樣編寫JavaScript代碼的技巧
英文 | https://medium.com/geekculture/12-javascript-tips-and-tricks-to-code-like-a-pro-1359de0d546a
翻譯 | 楊小二
由于JavaScript是每個 Web 開發(fā)人員必須要掌握的技能之一，因此，在本文中，我們將討論一些專業(yè)的JavaScript技巧，它們將節(jié)省你的開發(fā)時間，并讓你感覺自己是一名更加專業(yè)的程序員。
1、Quick Console.log
通過使用以下代碼片段，擺脫一遍又一遍地編寫 console.log 并使其更短。
// Quick Console.loglet c = console.log.bind(document)c('??????')c('This is JavaScript')c(true)c(234)
2、箭頭函數(shù)
箭頭函數(shù)技巧將通過縮短函數(shù)定義使你的生活更輕松。我主要使用這個技巧來使函數(shù)實現(xiàn)更快更容易閱讀。下面是兩個示例代碼。
// Arrow Functions// Example 1function Print1(){console.log("Hello World")}//arrow functionlet Print2 = () => {console.log("Hello World")}//Example 2function sum(x, y){return x + y}//arrow functionlet sum2 = (x , y) => { return x + y}console.log(sum2(3,4)) // 4
3、Spread Operator
展開運算符是 JavaScript ES6 中運算符集的新增功能。它接受一個可迭代對象（例如數(shù)組）并將其擴展為單個元素。下面是擴展運算符使用的示例代碼。
// Spread Operator// Array Concatinationlet num1 = [1, 2, 3]let num2 = [4, 5, 6]let concat = [...num1, ...num2]console.log(concat) // [1, 2, 3, 4, 5, 6]// Copying An Arraylet alpha = ["a", "b", "c"]let copy = [...alpha]console.log(copy) // ["a", "b", "c"]// Array literalslet data = [100, 200]let literal = [...data, 300, 400, 500]console.log(literal) // [100, 200, 300, 400, 500]
4、Truncating any Array
你是否知道 length 方法不僅可以顯示字符串的大小，還可以將數(shù)組截斷為任意大小？檢查下面的代碼示例以了解如何執(zhí)行此操作。
// Truncating an arraylet arr = [100, 200, 300, 400, 500, 600]// make size 3arr.length = 3console.log(arr) //[100, 200, 300]// make size 0arr.length = 0console.log(arr) // []
5、Smart Replacing
這個技巧將通過使用循環(huán)替換長字符串?dāng)?shù)據(jù)中的單詞來節(jié)省你的時間。我們將在 JavaScript 中使用 repac() 方法，它接受兩個參數(shù)，一個是要替換的單詞的正則表達式，第二個是新單詞。
當(dāng)你處理大文本數(shù)據(jù)并且你用一些新詞替換特定詞時，這會派上用場。查看下面的代碼示例以更好地理解。
// Smart Replacingvar str = "This is potato and potato"console.log(str.replace(/pot/, "tom")) // This is tomato and potatoconsole.log(str.replace(/pot/g, "tom")) // This is tomato and tomato
6、Numerical Separator
這個簡單的技巧將提高 JavaScript 中大量數(shù)據(jù)的可讀性。我們將使用“_”作為數(shù)字分隔符。查看下面的代碼示例。
// Numerical Separator// Normal Wayvar data1 = 100000var data2 = 300000000// With Separatorvar data3 = 100_000var data4 = 300_000_000console.log(data3) // 100000console.log(data4) // 300000000
7、Quick Power Calculation
你可能使用 math.pow() 方法來計算任何數(shù)字的冪。這個技巧將使用常規(guī)數(shù)學(xué)方法以快速形式計算功率。
// Quick Power Calculation// Normal Wayconsole.log(Math.pow(4,5)) // 1024console.log(Math.pow(2,5)) // 32// Quick Wayconsole.log(4**5) //1024console.log(2**5) // 32\
8、數(shù)據(jù)轉(zhuǎn)換為數(shù)字、字符串、布爾值
這個很棒的技巧將幫助你將數(shù)據(jù)轉(zhuǎn)換為數(shù)字、字符串和布爾值。在下面的示例中，我展示了如何使用一元運算符將整數(shù)轉(zhuǎn)換為字符串。
// Convert to Integerlet var1 = 12 + ""let var2 = 300 + ""console.log(typeof(var1)) // stringconsole.log(typeof(var2)) // string
這個轉(zhuǎn)換技巧會將你的字符串?dāng)?shù)字?jǐn)?shù)據(jù)轉(zhuǎn)換為整數(shù)格式數(shù)據(jù)。查看下面的代碼示例。
// Convert to Stringlet var3 = 14var3 =+var3console.log(var3) // 14console.log(typeof(var3)) // number
此轉(zhuǎn)換將向你展示如何將數(shù)字或整數(shù)轉(zhuǎn)換為布爾格式。下面我展示了一個示例代碼供你理解。
//Convert Number to Booleanlet var4 = !9console.log(var4) //falseconsole.log(typeof(var4))
9、Rest Parameter
Rest Parameter 語法用于處理函數(shù)定義中的無限數(shù)量的參數(shù)。下面的示例代碼將使你了解其余參數(shù)的有用性。
// Rest Parameterfunction sum(...num){var cal =0;for(const a of num){cal +=a}console.log(cal) //27}sum(2, 3, 4, 5, 6, 7)
11、Smart Short Loop
如果你處理小數(shù)據(jù)，這個技巧將使你的循環(huán)更短?？纯聪旅娴拇a示例。
// Smart Short Loopconst Names = ["Professor", "Tokio", "Denver", "Hesinki"];// Long version loopfor (let i = 0; i < Names.length; i++){console.log( Names[i]);}//Short Version Loopfor(let n of Names) console.log(n)
12、解構(gòu)
解構(gòu)是一個 JavaScript 表達式，它允許從數(shù)組中解壓縮值并將它們綁定到變量。下面的示例代碼將向你展示解構(gòu)的一些用法。
// Destructing// Normal wayfunction fun(){ return [2, 4, 6] }let d = fun()let x = d[0]let y = d[1]let z = d[2]console.log(x , y, z) // 2 4 6// destruting waylet [x, y, z] = fun()console.log(x, y, z) // 2 4 6// Destructing Swapinga= 4b= 2[a, b] = [b, a]console.log(a,b) // 4 2
學(xué)習(xí)更多技能
請點擊下方公眾號
