誰要是說 JavaScript 是世界上比較好的語言，估計會被唾沫星子淹沒。但是如果說 JavaScript 是世界上應用很廣泛的編程語言，估計大部分人都沒意見。尤其是有了 NodeJS 之后，JavaScript 更是無孔不入。

[[330053]]

Atwood 定律：“任何可以使用 JavaScript 來編寫的應用，最終會由 JavaScript 編寫。”

即便如此，JavaScript 還是有一些鮮為人知的特性和技巧，不太常見，但是非常有用。本文不打算介紹那些稀奇古怪的特性，因為除了作為茶余飯后的談資，沒什么卵用實際用途。本文要介紹的這 5 個技巧，學完即用，用完即走(下班)!

1.加號操作符+

確定沒搞錯?我小學一年級的侄子都知道啊!沒錯，基本的算術運算符+你肯定知道：

const two = 1 + 1; 

但這里說的不是數字相加，而是將將表達式轉換成數字的操作符。

console.log(+new Date()); // 1592102280555 
console.log(+true); // 1 
console.log(+false); // 0 
const random = { 
  valueOf: () => Math.floor(Math.random() * 100), 
}; 
console.log(+random); // 4 
console.log(+random); // 26 
console.log(+random); // 47 

剛接觸 JavaScript 的新手可能覺得這種寫法有點奇怪，數字類型轉換會傾向于用Number()函數。結果是一樣的，但是用+不是簡潔多了?另外值得說明的是，如果對象上包含valueOf方法，+操作符會返回這個方法的結果。比如上面的例子。

2.debugger 語句

在瀏覽器 DevTools 上打斷點調試，基本上人人都會。但是你知道怎么在代碼里標記斷點嗎?沒錯，就是用debugger語句。當你想快速斷點到某個指定代碼位置時，這個技巧就比較方便了。

const bubbleSort = (arr) => { 
  const length = arr.length; 
  for (let i = 0; i < length; i++) { 
    for (let j = 0; j < length - i - 1; j++) { 
      if (arr[j] > arr[j + 1]) { 
        debugger; 
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; 
      } 
    } 
  } 
  return arr; 
}; 
console.log(bubbleSort([8, 2, 19, 8, 4, 5, 2])); // 2, 2, 4, 5, 8, 8, 19 

debugger

3.逗號操作符

逗號?我看你是逗我吧!真沒逗你，這里說的逗號不是數組里的逗號，或者對象屬性之間的逗號，而是表達式里的逗號操作符。比如const a = (1, 2)，a的值就是 2。逗號操作符讓多個表達式按順序執行，并返回最后一個表達式的值。這有什么用呢?可以讓代碼更簡潔。比如：

let money = 10; 
const hasStudied = false; 
const relax = () => console.log('relax'); 
const study = () => console.log('study'); 
// 既完成變量賦值，又執行了方法 
hasStudied ? (money++, relax()) : ((money /= 2), study()); 
console.log(money); // study 5 
 
// 批量定義多個變量 
for (let i = 1, j = 2; i + j < 10; i++, j++) { 
  console.log(i, j); 
} 
// 1 2; 2 3; 3 4; 4 5; 
 
// 不改變現有方法實現的情況下，增加邏輯 
<button @click="visible = false, onConfirm()">確 定<button> 

4.集合對象 Set

這是 ES6 引入的數據結構，集合類型 Set。學過數學的都知道，集合的特性是不包含重復元素。有一道很常見的面試題，就是數組去重問題。當然，面試題的本意可能不是讓你直接用 Set，而是自己實現去重的邏輯。但是在實際工作中用來去重，它不香嗎?還可以用來計算兩個集合的交集：

// 數組去重 
const arr = [1, 1, 7, 5, 6, 6, 6, 8, 7]; 
// 傳統方式 
let noDup = arr.filter((a, b) => arr.indexOf(a) === b); 
// 用 Set 更方便 
noDup = [...new Set(arr)]; 
console.log(noDup); // 1 7 5 6 8 
 
// 集合操作 
let a = new Set('hello world!'); 
// "h", "e", "l", "o", " ", "w", "r", "d", "!" 
let b = new Set('jianshu is cool!'); 
// "j", "i", "a", "n", "s", "h", "u", " ", "c", "o", "l", "!" 
// 交集 
const intersection = (a, b) => { 
  let intersection = new Set(); 
  for (let elem of b) { 
    if (a.has(elem)) { 
      intersection.add(elem); 
    } 
  } 
  return intersection; 
}; 
console.log(intersection(a, b)); 
// "h", " ", "o", "l", "!" 

5.原生 Date 操作

我碰到很多前端開發，凡是日期操作必用 moment.js 之類的庫。不是說不能用，但是如果只是少數地方用了少數幾個 API，比如簡單的格式化，有必要引入一個庫嗎?再說了，如果碰到一些自定義需求，API 不支持怎么辦?其實原生操作并沒有你想象的那么麻煩，了解原理和邏輯后很快就可以自己寫一個。比如格式化：

function formatDate(date, format) { 
    var calendar = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; 
    format = format || 'Y-m-d'; 
    var dateObj = new Date(date); 
    if(isNaN(+dateObj)) { 
        return 'Invalid Date'; 
    } 
    var year = dateObj.getFullYear(), 
        month = dateObj.getMonth() + 1, 
        date = dateObj.getDate(); 
    return format.replace('Y', year).replace('m', month).replace('d', date).replace('M', calendar[month - 1]); 
} 

也就幾行代碼的事!再比如，獲取上個月的最后一天，可能 moment.js 有相關的 API，我也懶得去查了，原生也很簡單：

const day1 = new Date(); 
day1.setDate(-1); // 難以置信，就這么簡單！ 

總結

沒啥好總結的，干就完了!