JavaScript的這5個技巧你知道了嗎

JavaScript的這5個技巧你知道了嗎，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

Atwood 定律：“任何可以使用 JavaScript 來編寫的應用，最終會由 JavaScript 編寫?！?/p>

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

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); // 難以置信，就這么簡單！

看完上述內容，你們掌握JavaScript的這5個技巧你知道了嗎的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！