開發(fā)中常用的 25 個JavaScript 單行代碼

2021-01-29    分類： 網站建設

1.強制布爾值

要將變量強制轉換為布爾值而不更改其值：

  1. const?myBoolean?=?!!?myVariable;?
  2. !!null?//?false?
  3. !!undefined?//?false?
  4. !!false?//?false?
  5. !!ture?//?ture?
  6. !!""?//?false?
  7. !!"string"?//?true?
  8. !!0?//?false?
  9. !!1?//?true?
  10. !!{}?//?true?
  11. !![]?//?true?

2.基于某個條件為對象設置屬性

要使用spread運算符有條件地在對象上設置屬性：

  1. const?myObject?=?{...?myProperty?&&?{propName：myPoperty}};?
  2. let?myProperty?=?'Jhon'?
  3. const?myObject?=?{...myProperty?&&?{propName:?myProperty}};?//?{propName:?"Jhon"}?
  4. let?myProperty?=?''?
  5. const?myObject?=?{...myProperty?&&?{propName:?myProperty}};?//?{}?

如果myProperty結果為false，則 && 失敗并且不設置新屬性; 否則，如果不為空，&& 將設置新屬性并覆蓋原來的值。

3.合并對象 

  1. const?mergedObject?=?{?...objectOne,?...objectTwo?};?
  2. const?mergedObject?=?{?...{name:?'Jhon',?age:?'18'},?...{name1:?'jhon1',?age1:?'12'}};?
  3. //?{name:?"Jhon",?age:?"18",?name1:?"jhon1",?age1:?"12"}?
  4. const?mergedObject?=?{?...{name:?'Jhon',?age:?'18'},?...{name:?'jhon1',?age:'12'}};?
  5. //?{name:?"jhon1",?age:?"12"}?

支持無限制合并，但如果對象之間存在相同屬性，則后面屬性會覆蓋前面屬性。*請注意，這僅適用于淺層合并。

4.交換變量

要在不使用中間變量的情況下交換兩個變量的值：

  1. [varA，varB]?=?[varB，varA];?
  2. let?a?=?1;?
  3. let?b?=?2;?
  4. [a,?b]?=?[b,?a]?//?a?=?2?b?=?1?

5.刪除Boolean 為 false 值 

  1. const?clean?=?dirty.filter(Boolean);?
  2. const?clean?=?[0,?false,?true,?undefined,?null,?'',?12,?15].filter(Boolean);?
  3. //?[true,?12,?15]?

這將刪除值等于：null，undefined，false，0 和空字符串('')。

6.轉換元素類型

要將Number元素轉換為String元素：

  1. const?stringArray?=?numberArray.map(String);?
  2. const?stringArray?=?[1,?2,?3].map(String);?
  3. ["1",?"2",?"3"]?

如果數組包含字符串，字符串原樣保留。 這也可以用于將String元素轉換為Number類型：

  1. const?numberArray?=?stringArray.map(Number);?
  2. const?stringArray?=?["1",?"2",?"3"].map(String);?
  3. //?[1,?2,?3]?

7.格式化對象為JSON代碼

要以可讀的格式顯示JSON代碼：

  1. const?formatted?=?JSON.stringify(myObj,?null,?4);?
  2. const?formatted?=?JSON.stringify({name:?'Jhon',?age:?18,?address:?'sz'},?null,?4);?
  3. /*?
  4. {?
  5. ?"name":?"Jhon",?
  6. ?"age":?18,?
  7. ?"address":?"sz"?
  8. }?
  9. */?

該字符串化命令有三個參數。第一個是Javascript對象。第二個是可選函數，可用于在JSON進行字符串化時對其執(zhí)行操作。最后一個參數指示要添加多少空格作為縮進以格式化JSON。省略最后一個參數，JSON將返回一個長行。如果myObj中存在循環(huán)引用，則會格式失敗。

8.快速創(chuàng)建數字數組

要創(chuàng)建一個數組并用數字填充它，索引為零：

  1. const?numArray?=?Array.from(new?Array(10),?(x,?i)=>?i);?
  2. //?[0,?1,?2,?3,?4,?5,?6,?7,?8,?9]?

9.隨機生成六位數字驗證碼 

  1. const?code?=?Math.floor(Math.random()?*?1000000).toString().padStart(6,?"0");?
  2. //?942377?

10.身份證正則 

  1. const?IDReg=?/(^[1-9]d{5}(18|19|([23]d))d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$)|(^[1-9]d{5}d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{2}[0-9Xx]$)/;?

11.window.location.search 轉 JS 對象

有時候我們會對url的查詢參數即從問號 (?)后 開始的 URL（查詢部分）進行轉換

  1. const?searchObj?=?search?=>?JSON.parse(`{"${decodeURIComponent(search.substring(1)).replace(/"/g,?'\"').replace(/&/g,?'","').replace(/=/g,?'":"')}"}`);?
  2. //?假如請求url為?
  3. //?'https://www.baidu.com?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=a86b5e5f0007bceb&rsv_t=1e1fAVan%2BVlnkhJHFB0BIGLdLM2slszYMJBTTfFkmyyBUzBpw0ggeuVDE50&rqlang=cn&rsv_enter=0&inputT=1287&rsv_sug3=5&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&rsv_sug4=1907'?
  4. //?那么?window.location.search?就為：?
  5. let?search?=?'?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=a86b5e5f0007bceb&rsv_t=1e1fAVan%2BVlnkhJHFB0BIGLdLM2slszYMJBTTfFkmyyBUzBpw0ggeuVDE50&rqlang=cn&rsv_enter=0&inputT=1287&rsv_sug3=5&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&rsv_sug4=1907'?
  6. searchObj(search)?

格式化查詢字符串得到如下對象：

12. JS 對象轉 url 查詢字符串 

  1. const?objectToQueryString?=?(obj)?=>?Object.keys(obj).map((key)?=>?`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');?
  2. objectToQueryString({name:?'Jhon',?age:?18,?address:?'beijing'})?
  3. //?name=Jhon&age=18&address=beijing?

13.獲取數組交集 

  1. const?similarity?=?(arr,?values)?=>?arr.filter(v?=>?values.includes(v));?
  2. similarity([1,?2,?3],?[1,?2,?4]);?//?[1,2]?

14.檢測設備類型

使用正則表達式來檢測 navigator.userAgent 屬性判斷設備是在移動設備還是在臺式機/筆記本電腦打開。

  1. const?detectDeviceType?=?()?=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)???'Mobile'?:?'Desktop';?

15. 將數字轉化為千分位格式 

  1. const?toDecimalMark?=?num?=>?num.toLocaleString('en-US');?
  2. toDecimalMark(12305030388.9087);?//?"12,305,030,388.909"?

16 多維數組轉一維數組 

  1. const?deepFlatten?=?arr?=>?[].concat(...arr.map(v?=>?(Array.isArray(v)???deepFlatten(v)?:?v)));?
  2. deepFlatten([1,?[2],?[[3],?4],?5]);?//?[1,2,3,4,5]?

17.過濾對象數組 

  1. const?reducedFilter?=?(data,?keys,?fn)?=>data.filter(fn).map(el?=>keys.reduce((acc,?key)?=>?{acc[key]?=el[key];return?acc;},?{}));?
  2. const?data?=?[?
  3. ?{?
  4. ?id:?1,?
  5. ?name:?'john',?
  6. ?age:?24?
  7. ?},?
  8. ?{?
  9. ?id:?2,?
  10. ?name:?'mike',?
  11. ?age:?50?
  12. ?}?
  13. ];?
  14. let?a?=?reducedFilter(data,?['id',?'name'],?item?=>?item.age?>?24);?//?[{?id:?2,?name:?'mike'}]?

18.駝峰字字符串格式化

轉換駝峰拼寫的字符串為特定格式。

使用 String.replace() 去除下劃線，連字符和空格，并將駝峰拼寫格式的單詞轉換為全小寫。省略第二個參數 separator ，默認使用 _ 分隔符。

  1. const?fromCamelCase?=?(str,?separator?=?'_')?=>str.replace(/([a-zd])([A-Z])/g,?'$1'?+?separator?+?'$2').replace(/([A-Z]+)([A-Z][a-zd]+)/g,?'$1'?+?separator?+?'$2').toLowerCase();?
  2. fromCamelCase('someDatabaseFieldName',?'?');?//?'some?database?field?name'?
  3. fromCamelCase('someLabelThatNeedsToBeCamelized',?'-');?//?'some-label-that-needs-to-be-camelized'?
  4. fromCamelCase('someJavascriptProperty',?'_');?//?'some_javascript_property'?

19.是否為絕對地址 

  1. const?isAbsoluteURL?=?str?=>?/^[a-z][a-z0-9+.-]*:/.test(str);?
  2. isAbsoluteURL('https://google.com');?//?true?
  3. isAbsoluteURL('ftp://www.myserver.net');?//?true?
  4. isAbsoluteURL('/foo/bar');?//?false?

20.獲取兩個日期相差天數 

  1. const?getDaysDiffBetweenDates?=?(dateInitial,?dateFinal)?=>?(dateFinal?-?dateInitial)?/?(1000?*?3600?*?24);?
  2. getDaysDiffBetweenDates(new?Date('2017-12-13'),?new?Date('2017-12-22'));?//?9?

21.數組去重 

  1. const?deDupe?=?(myArray)?=>?[...?new?Set(myArray)];?
  2. deDupe([1,?1,?2,?1,?3,?3,?4])?
  3. //?[1,?2,?3,?4]?

22.數組對象去重 

  1. const?uniqueElementsBy?=?(arr,?fn)?=>arr.reduce((acc,?v)?=>?{if?(!acc.some(x?=>?fn(v,?x)))?acc.push(v);return?acc;},?[]);?
  2. uniqueElementsBy([{id:?1,?name:?'Jhon'},?{id:?2,?name:?'sss'},?{id:?1,?name:?'Jhon'}],?(a,?b)?=>?a.id?==?b.id)?
  3. //?[{id:?1,?name:?'Jhon'},?{id:?2,?name:?'sss'}]?

23. RGB 顏色轉 16進制顏色 

  1. const?RGBToHex?=?(r,?g,?b)?=>?((r?<
  2. RGBToHex(255,?165,?1);?//?'ffa501'?

24. 常用密碼組合正則 

  1. const?passwordReg?=?/(?!^(d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[w~!@#$%^&*?]{8,20}$/;?
  2. //?-長度8~20位字符，支持大小寫字母、數字、符號三種字符中任意兩種字符的組合?

25. 判斷dom元素是否具有某個className 

  1. const?hasClass?=?(el,?className)?=>?new?RegExp(`(^|\s)${className}(\s|$)`).test(el.classNam

當前題目：開發(fā)中常用的 25 個JavaScript 單行代碼
分享URL：http://www.bm7419.com/news/98046.html

成都網站建設公司_創(chuàng)新互聯，為您提供全網營銷推廣、營銷型網站建設、網站排名、網站策劃、手機網站建設、軟件開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

成都做網站