誰要是說 JavaScript 是世界上最好的語言，估計會被唾沫星子淹沒。但是如果說 JavaScript 是世界上應用最廣泛的編程語言，估計大部分人都沒意見。尤其是有了 NodeJS 之後，JavaScript 更是無孔不入。
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
本次給大家推薦一個免費的學習蔻qun，前面603 中間985最後993，
裏面概括應用網站開發，css，html，JavaScript，jQuery，Vue、Ajax，node，
angular等。對web前端開發技術感興趣的同學，
不管你是小白還是大牛我都歡迎，每天技術分享。
剛接觸 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
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); // 難以置信，就這麼簡單！
總結
沒啥好總結的，幹就完了！