日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
自從知道了這幾個(gè)JavaScript技巧，下班都變?cè)缌耍?/div>

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

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、清河網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開發(fā)、清河網(wǎng)絡(luò)營銷、清河企業(yè)策劃、清河品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供清河建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

Atwood 定律：“任何可以使用 JavaScript 來編寫的應(yīng)用，最終會(huì)由 JavaScript 編寫?！?/p>

即便如此，JavaScript 還是有一些鮮為人知的特性和技巧，不太常見，但是非常有用。本文不打算介紹那些稀奇古怪的特性，因?yàn)槌俗鳛椴栌囡埡蟮恼勝Y，沒什么卵用實(shí)際用途。本文要介紹的這 5 個(gè)技巧，學(xué)完即用，用完即走(下班)!

1.加號(hào)操作符+

確定沒搞錯(cuò)?我小學(xué)一年級(jí)的侄子都知道啊!沒錯(cuò)，基本的算術(shù)運(yùn)算符+你肯定知道：

 
 
 
 
    
  
  
  
  
  1. const two = 1 + 1; 
    2.

但這里說的不是數(shù)字相加，而是將將表達(dá)式轉(zhuǎn)換成數(shù)字的操作符。

 
 
 
 
    
  
  
  
  
  1. console.log(+new Date()); // 1592102280555 
    2. 
  
  
  
  
  2. console.log(+true); // 1 
    3. 
  
  
  
  
  3. console.log(+false); // 0 
    4. 
  
  
  
  
  4. const random = { 
    5. 
  
  
  
  
  5.   valueOf: () => Math.floor(Math.random() * 100), 
    6. 
  
  
  
  
  6. }; 
    7. 
  
  
  
  
  7. console.log(+random); // 4 
    8. 
  
  
  
  
  8. console.log(+random); // 26 
    9. 
  
  
  
  
  9. console.log(+random); // 47 
    10.

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

2.debugger 語句

在瀏覽器 DevTools 上打斷點(diǎn)調(diào)試，基本上人人都會(huì)。但是你知道怎么在代碼里標(biāo)記斷點(diǎn)嗎?沒錯(cuò)，就是用debugger語句。當(dāng)你想快速斷點(diǎn)到某個(gè)指定代碼位置時(shí)，這個(gè)技巧就比較方便了。

 
 
 
 
    
  
  
  
  
  1. const bubbleSort = (arr) => { 
    2. 
  
  
  
  
  2.   const length = arr.length; 
    3. 
  
  
  
  
  3.   for (let i = 0; i < length; i++) { 
    4. 
  
  
  
  
  4.     for (let j = 0; j < length - i - 1; j++) { 
    5. 
  
  
  
  
  5.       if (arr[j] > arr[j + 1]) { 
    6. 
  
  
  
  
  6.         debugger; 
    7. 
  
  
  
  
  7.         [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; 
    8. 
  
  
  
  
  8.       } 
    9. 
  
  
  
  
  9.     } 
    10. 
  
  
  
  
  10.   } 
    11. 
  
  
  
  
  11.   return arr; 
    12. 
  
  
  
  
  12. }; 
    13. 
  
  
  
  
  13. console.log(bubbleSort([8, 2, 19, 8, 4, 5, 2])); // 2, 2, 4, 5, 8, 8, 19 
    14.

 

debugger

3.逗號(hào)操作符

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

 
 
 
 
    
  
  
  
  
  1. let money = 10; 
    2. 
  
  
  
  
  2. const hasStudied = false; 
    3. 
  
  
  
  
  3. const relax = () => console.log('relax'); 
    4. 
  
  
  
  
  4. const study = () => console.log('study'); 
    5. 
  
  
  
  
  5. // 既完成變量賦值，又執(zhí)行了方法 
    6. 
  
  
  
  
  6. hasStudied ? (money++, relax()) : ((money /= 2), study()); 
    7. 
  
  
  
  
  7. console.log(money); // study 5 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. // 批量定義多個(gè)變量 
    10. 
  
  
  
  
  10. for (let i = 1, j = 2; i + j < 10; i++, j++) { 
    11. 
  
  
  
  
  11.   console.log(i, j); 
    12. 
  
  
  
  
  12. } 
    13. 
  
  
  
  
  13. // 1 2; 2 3; 3 4; 4 5; 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. // 不改變現(xiàn)有方法實(shí)現(xiàn)的情況下，增加邏輯 
    16. 
  
  
  
  
  16. 確 定
    17.

 

4.集合對(duì)象 Set

這是 ES6 引入的數(shù)據(jù)結(jié)構(gòu)，集合類型 Set。學(xué)過數(shù)學(xué)的都知道，集合的特性是不包含重復(fù)元素。有一道很常見的面試題，就是數(shù)組去重問題。當(dāng)然，面試題的本意可能不是讓你直接用 Set，而是自己實(shí)現(xiàn)去重的邏輯。但是在實(shí)際工作中用來去重，它不香嗎?還可以用來計(jì)算兩個(gè)集合的交集：

 
 
 
 
    
  
  
  
  
  1. // 數(shù)組去重 
    2. 
  
  
  
  
  2. const arr = [1, 1, 7, 5, 6, 6, 6, 8, 7]; 
    3. 
  
  
  
  
  3. // 傳統(tǒng)方式 
    4. 
  
  
  
  
  4. let noDup = arr.filter((a, b) => arr.indexOf(a) === b); 
    5. 
  
  
  
  
  5. // 用 Set 更方便 
    6. 
  
  
  
  
  6. noDup = [...new Set(arr)]; 
    7. 
  
  
  
  
  7. console.log(noDup); // 1 7 5 6 8 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. // 集合操作 
    10. 
  
  
  
  
  10. let a = new Set('hello world!'); 
    11. 
  
  
  
  
  11. // "h", "e", "l", "o", " ", "w", "r", "d", "!" 
    12. 
  
  
  
  
  12. let b = new Set('jianshu is cool!'); 
    13. 
  
  
  
  
  13. // "j", "i", "a", "n", "s", "h", "u", " ", "c", "o", "l", "!" 
    14. 
  
  
  
  
  14. // 交集 
    15. 
  
  
  
  
  15. const intersection = (a, b) => { 
    16. 
  
  
  
  
  16.   let intersection = new Set(); 
    17. 
  
  
  
  
  17.   for (let elem of b) { 
    18. 
  
  
  
  
  18.     if (a.has(elem)) { 
    19. 
  
  
  
  
  19.       intersection.add(elem); 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21.   } 
    22. 
  
  
  
  
  22.   return intersection; 
    23. 
  
  
  
  
  23. }; 
    24. 
  
  
  
  
  24. console.log(intersection(a, b)); 
    25. 
  
  
  
  
  25. // "h", " ", "o", "l", "!" 
    26.

5.原生 Date 操作

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

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

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

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

總結(jié)

沒啥好總結(jié)的，干就完了!


網(wǎng)頁名稱：自從知道了這幾個(gè)JavaScript技巧，下班都變?cè)缌耍?
網(wǎng)頁網(wǎng)址：http://m.5511xx.com/article/cosdecc.html