英文 | https://medium.com/geekculture/12-javascript-tips-and-tricks-to-code-like-a-pro-1359de0d546a
翻譯 | 楊小二
由于JavaScript是每個 Web 開發人員必須要掌握的技能之一，是以，在本文中，我們将讨論一些專業的JavaScript技巧，它們将節省你的開發時間，并讓你感覺自己是一名更加專業的程式員。
1、Quick Console.log
通過使用以下代碼片段，擺脫一遍又一遍地編寫 console.log 并使其更短。
// Quick Console.log
let c = console.log.bind(document)
c('😄😄😄')
c('This is JavaScript')
c(true)
c(234) 2、箭頭函數
箭頭函數技巧将通過縮短函數定義使你的生活更輕松。我主要使用這個技巧來使函數實作更快更容易閱讀。下面是兩個示例代碼。
// Arrow Functions
// Example 1
function Print1()
{
console.log("Hello World")
}
//arrow function
let Print2 = () => {
console.log("Hello World")
}
//Example 2
function sum(x, y)
{
return x + y
}
//arrow function
let sum2 = (x , y) => { return x + y}
console.log(sum2(3,4)) // 4 3、Spread Operator
展開運算符是 JavaScript ES6 中運算符集的新增功能。它接受一個可疊代對象（例如數組）并将其擴充為單個元素。下面是擴充運算符使用的示例代碼。
// Spread Operator
// Array Concatination
let num1 = [1, 2, 3]
let num2 = [4, 5, 6]
let concat = [...num1, ...num2]
console.log(concat) // [1, 2, 3, 4, 5, 6]
// Copying An Array
let alpha = ["a", "b", "c"]
let copy = [...alpha]
console.log(copy) // ["a", "b", "c"]
// Array literals
let data = [100, 200]
let literal = [...data, 300, 400, 500]
console.log(literal) // [100, 200, 300, 400, 500] 4、Truncating any Array
你是否知道 length 方法不僅可以顯示字元串的大小，還可以将數組截斷為任意大小？檢查下面的代碼示例以了解如何執行此操作。
// Truncating an array
let arr = [100, 200, 300, 400, 500, 600]
// make size 3
arr.length = 3
console.log(arr) //[100, 200, 300]
// make size 0
arr.length = 0
console.log(arr) // [] 5、Smart Replacing
這個技巧将通過使用循環替換長字元串資料中的單詞來節省你的時間。我們将在 JavaScript 中使用 repac() 方法，它接受兩個參數，一個是要替換的單詞的正規表達式，第二個是新單詞。
當你處理大文本資料并且你用一些新詞替換特定詞時，這會派上用場。檢視下面的代碼示例以更好地了解。
// Smart Replacing
var str = "This is potato and potato"
console.log(str.replace(/pot/, "tom")) // This is tomato and potato
console.log(str.replace(/pot/g, "tom")) // This is tomato and tomato 6、Numerical Separator
這個簡單的技巧将提高 JavaScript 中大量資料的可讀性。我們将使用“_”作為數字分隔符。檢視下面的代碼示例。
// Numerical Separator
// Normal Way
var data1 = 100000
var data2 = 300000000
// With Separator
var data3 = 100_000
var data4 = 300_000_000
console.log(data3) // 100000
console.log(data4) // 300000000 7、Quick Power Calculation
你可能使用 math.pow() 方法來計算任何數字的幂。這個技巧将使用正常數學方法以快速形式計算功率。
// Quick Power Calculation
// Normal Way
console.log(Math.pow(4,5)) // 1024
console.log(Math.pow(2,5)) // 32
// Quick Way
console.log(4**5) //1024
console.log(2**5) // 32\ 8、資料轉換為數字、字元串、布爾值
這個很棒的技巧将幫助你将資料轉換為數字、字元串和布爾值。在下面的示例中，我展示了如何使用一進制運算符将整數轉換為字元串。
// Convert to Integer
let var1 = 12 + ""
let var2 = 300 + ""
console.log(typeof(var1)) // string
console.log(typeof(var2)) // string 這個轉換技巧會将你的字元串數字資料轉換為整數格式資料。檢視下面的代碼示例。
// Convert to String
let var3 = 14
var3 =+var3
console.log(var3) // 14
console.log(typeof(var3)) // number 此轉換将向你展示如何将數字或整數轉換為布爾格式。下面我展示了一個示例代碼供你了解。
//Convert Number to Boolean
let var4 = !9
console.log(var4) //false
console.log(typeof(var4)) 9、Rest Parameter
Rest Parameter 文法用于處理函數定義中的無限數量的參數。下面的示例代碼将使你了解其餘參數的有用性。
// Rest Parameter
function 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
如果你處理小資料，這個技巧将使你的循環更短。看看下面的代碼示例。
// Smart Short Loop
const Names = ["Professor", "Tokio", "Denver", "Hesinki"];
// Long version loop
for (let i = 0; i < Names.length; i++)
{
console.log( Names[i]);
}
//Short Version Loop
for(let n of Names) console.log(n) 12、解構
解構是一個 JavaScript 表達式，它允許從數組中解壓縮值并将它們綁定到變量。下面的示例代碼将向你展示解構的一些用法。
// Destructing
// Normal way
function 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 way
let [x, y, z] = fun()
console.log(x, y, z) // 2 4 6
// Destructing Swaping
a= 4
b= 2
[a, b] = [b, a]
console.log(a,b) // 4 2 以上這些，就是我們讨論的 12個JavaScript 技巧。我希望你喜歡這篇文章，并與你的 JavaScript 開發人員的朋友分享這篇文章。
祝程式設計快樂！
學習更多技能
請點選下方公衆号
