2021-01-29 分類: 網(wǎng)站建設(shè)
要將變量強(qiáng)制轉(zhuǎn)換為布爾值而不更改其值:
- const?myBoolean?=?!!?myVariable;?
- !!null?//?false?
- !!undefined?//?false?
- !!false?//?false?
- !!ture?//?ture?
- !!""?//?false?
- !!"string"?//?true?
- !!0?//?false?
- !!1?//?true?
- !!{}?//?true?
- !![]?//?true?
要使用spread運(yùn)算符有條件地在對象上設(shè)置屬性:
- const?myObject?=?{...?myProperty?&&?{propName:myPoperty}};?
- let?myProperty?=?'Jhon'?
- const?myObject?=?{...myProperty?&&?{propName:?myProperty}};?//?{propName:?"Jhon"}?
- let?myProperty?=?''?
- const?myObject?=?{...myProperty?&&?{propName:?myProperty}};?//?{}?
如果myProperty結(jié)果為false,則 && 失敗并且不設(shè)置新屬性; 否則,如果不為空,&& 將設(shè)置新屬性并覆蓋原來的值。
- const?mergedObject?=?{?...objectOne,?...objectTwo?};?
- const?mergedObject?=?{?...{name:?'Jhon',?age:?'18'},?...{name1:?'jhon1',?age1:?'12'}};?
- //?{name:?"Jhon",?age:?"18",?name1:?"jhon1",?age1:?"12"}?
- const?mergedObject?=?{?...{name:?'Jhon',?age:?'18'},?...{name:?'jhon1',?age:'12'}};?
- //?{name:?"jhon1",?age:?"12"}?
支持無限制合并,但如果對象之間存在相同屬性,則后面屬性會(huì)覆蓋前面屬性。*請注意,這僅適用于淺層合并。
要在不使用中間變量的情況下交換兩個(gè)變量的值:
- [varA,varB]?=?[varB,varA];?
- let?a?=?1;?
- let?b?=?2;?
- [a,?b]?=?[b,?a]?//?a?=?2?b?=?1?
- const?clean?=?dirty.filter(Boolean);?
- const?clean?=?[0,?false,?true,?undefined,?null,?'',?12,?15].filter(Boolean);?
- //?[true,?12,?15]?
這將刪除值等于:null,undefined,false,0 和空字符串('')。
要將Number元素轉(zhuǎn)換為String元素:
- const?stringArray?=?numberArray.map(String);?
- const?stringArray?=?[1,?2,?3].map(String);?
- ["1",?"2",?"3"]?
如果數(shù)組包含字符串,字符串原樣保留。 這也可以用于將String元素轉(zhuǎn)換為Number類型:
- const?numberArray?=?stringArray.map(Number);?
- const?stringArray?=?["1",?"2",?"3"].map(String);?
- //?[1,?2,?3]?
要以可讀的格式顯示JSON代碼:
- const?formatted?=?JSON.stringify(myObj,?null,?4);?
- const?formatted?=?JSON.stringify({name:?'Jhon',?age:?18,?address:?'sz'},?null,?4);?
- /*?
- {?
- ?"name":?"Jhon",?
- ?"age":?18,?
- ?"address":?"sz"?
- }?
- */?
該字符串化命令有三個(gè)參數(shù)。第一個(gè)是Javascript對象。第二個(gè)是可選函數(shù),可用于在JSON進(jìn)行字符串化時(shí)對其執(zhí)行操作。最后一個(gè)參數(shù)指示要添加多少空格作為縮進(jìn)以格式化JSON。省略最后一個(gè)參數(shù),JSON將返回一個(gè)長行。如果myObj中存在循環(huán)引用,則會(huì)格式失敗。
要?jiǎng)?chuàng)建一個(gè)數(shù)組并用數(shù)字填充它,索引為零:
- const?numArray?=?Array.from(new?Array(10),?(x,?i)=>?i);?
- //?[0,?1,?2,?3,?4,?5,?6,?7,?8,?9]?
- const?code?=?Math.floor(Math.random()?*?1000000).toString().padStart(6,?"0");?
- //?942377?
- 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]$)/;?
有時(shí)候我們會(huì)對url的查詢參數(shù)即從問號 (?)后 開始的 URL(查詢部分)進(jìn)行轉(zhuǎn)換
- const?searchObj?=?search?=>?JSON.parse(`{"${decodeURIComponent(search.substring(1)).replace(/"/g,?'\"').replace(/&/g,?'","').replace(/=/g,?'":"')}"}`);?
- //?假如請求url為?
- //?'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'?
- //?那么?window.location.search?就為:?
- 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'?
- searchObj(search)?
格式化查詢字符串得到如下對象:
- const?objectToQueryString?=?(obj)?=>?Object.keys(obj).map((key)?=>?`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');?
- objectToQueryString({name:?'Jhon',?age:?18,?address:?'beijing'})?
- //?name=Jhon&age=18&address=beijing?
- const?similarity?=?(arr,?values)?=>?arr.filter(v?=>?values.includes(v));?
- similarity([1,?2,?3],?[1,?2,?4]);?//?[1,2]?
使用正則表達(dá)式來檢測 navigator.userAgent 屬性判斷設(shè)備是在移動(dòng)設(shè)備還是在臺(tái)式機(jī)/筆記本電腦打開。
- const?detectDeviceType?=?()?=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)???'Mobile'?:?'Desktop';?
- const?toDecimalMark?=?num?=>?num.toLocaleString('en-US');?
- toDecimalMark(12305030388.9087);?//?"12,305,030,388.909"?
- const?deepFlatten?=?arr?=>?[].concat(...arr.map(v?=>?(Array.isArray(v)???deepFlatten(v)?:?v)));?
- deepFlatten([1,?[2],?[[3],?4],?5]);?//?[1,2,3,4,5]?
- const?reducedFilter?=?(data,?keys,?fn)?=>data.filter(fn).map(el?=>keys.reduce((acc,?key)?=>?{acc[key]?=el[key];return?acc;},?{}));?
- const?data?=?[?
- ?{?
- ?id:?1,?
- ?name:?'john',?
- ?age:?24?
- ?},?
- ?{?
- ?id:?2,?
- ?name:?'mike',?
- ?age:?50?
- ?}?
- ];?
- let?a?=?reducedFilter(data,?['id',?'name'],?item?=>?item.age?>?24);?//?[{?id:?2,?name:?'mike'}]?
轉(zhuǎn)換駝峰拼寫的字符串為特定格式。
使用 String.replace() 去除下劃線,連字符和空格,并將駝峰拼寫格式的單詞轉(zhuǎn)換為全小寫。省略第二個(gè)參數(shù) separator ,默認(rèn)使用 _ 分隔符。
- 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();?
- fromCamelCase('someDatabaseFieldName',?'?');?//?'some?database?field?name'?
- fromCamelCase('someLabelThatNeedsToBeCamelized',?'-');?//?'some-label-that-needs-to-be-camelized'?
- fromCamelCase('someJavascriptProperty',?'_');?//?'some_javascript_property'?
- const?isAbsoluteURL?=?str?=>?/^[a-z][a-z0-9+.-]*:/.test(str);?
- isAbsoluteURL('https://google.com');?//?true?
- isAbsoluteURL('ftp://www.myserver.net');?//?true?
- isAbsoluteURL('/foo/bar');?//?false?
- const?getDaysDiffBetweenDates?=?(dateInitial,?dateFinal)?=>?(dateFinal?-?dateInitial)?/?(1000?*?3600?*?24);?
- getDaysDiffBetweenDates(new?Date('2017-12-13'),?new?Date('2017-12-22'));?//?9?
- const?deDupe?=?(myArray)?=>?[...?new?Set(myArray)];?
- deDupe([1,?1,?2,?1,?3,?3,?4])?
- //?[1,?2,?3,?4]?
- const?uniqueElementsBy?=?(arr,?fn)?=>arr.reduce((acc,?v)?=>?{if?(!acc.some(x?=>?fn(v,?x)))?acc.push(v);return?acc;},?[]);?
- uniqueElementsBy([{id:?1,?name:?'Jhon'},?{id:?2,?name:?'sss'},?{id:?1,?name:?'Jhon'}],?(a,?b)?=>?a.id?==?b.id)?
- //?[{id:?1,?name:?'Jhon'},?{id:?2,?name:?'sss'}]?
- const?RGBToHex?=?(r,?g,?b)?=>?((r?<16)?+?(g?<8)?+?b).toString(16).padStart(6,?'0');?
16)?+?(g?<8)?+?b).toString(16).padStart(6,?>- RGBToHex(255,?165,?1);?//?'ffa501'?
- const?passwordReg?=?/(?!^(d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[w~!@#$%^&*?]{8,20}$/;?
- //?-長度8~20位字符,支持大小寫字母、數(shù)字、符號三種字符中任意兩種字符的組合?
- const?hasClass?=?(el,?className)?=>?new?RegExp(`(^|\s)${className}(\s|$)`).test(el.classNam
本文標(biāo)題:開發(fā)中常用的 25 個(gè)JavaScript 單行代碼
本文鏈接:http://m.rwnh.cn/news46/98046.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)、商城網(wǎng)站、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容