開(kāi)發(fā)中常用的25個(gè)JavaScript單行代碼(小結(jié))
1.強(qiáng)制布爾值
要將變量強(qiáng)制轉(zhuǎn)換為布爾值而不更改其值：
const myBoolean = !! myVariable;
!!null // false
!!undefined // false
!!false // false
!!ture // ture
!!"" // false
!!"string" // true
!!0 // false
!!1 // true
!!{} // true
!![] // true
2.基于某個(gè)條件為對(duì)象設(shè)置屬性
要使用spread運(yùn)算符有條件地在對(duì)象上設(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è)置新屬性并覆蓋原來(lái)的值。
3.合并對(duì)象
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"}
支持無(wú)限制合并，但如果對(duì)象之間存在相同屬性，則后面屬性會(huì)覆蓋前面屬性。*請(qǐng)注意，這僅適用于淺層合并。
4.交換變量
要在不使用中間變量的情況下交換兩個(gè)變量的值：
[varA，varB] = [varB，varA]; let a = 1; let b = 2; [a, b] = [b, a] // a = 2 b = 1 5.刪除Boolean 為 false 值 const clean = dirty.filter(Boolean); const clean = [0, false, true, undefined, null, '', 12, 15].filter(Boolean); // [true, 12, 15]
這將刪除值等于：null，undefined，false，0 和空字符串('')。
6.轉(zhuǎn)換元素類型
要將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]
7.格式化對(duì)象為JSON代碼
要以可讀的格式顯示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對(duì)象。第二個(gè)是可選函數(shù)，可用于在JSON進(jìn)行字符串化時(shí)對(duì)其執(zhí)行操作。最后一個(gè)參數(shù)指示要添加多少空格作為縮進(jìn)以格式化JSON。省略最后一個(gè)參數(shù)，JSON將返回一個(gè)長(zhǎng)行。如果myObj中存在循環(huán)引用，則會(huì)格式失敗。
8.快速創(chuàng)建數(shù)字?jǐn)?shù)組
要?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]
9.隨機(jī)生成六位數(shù)字驗(yàn)證碼
const code = Math.floor(Math.random() * 1000000).toString().padStart(6, "0"); // 942377
10.身份證正則
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 轉(zhuǎn) JS 對(duì)象
有時(shí)候我們會(huì)對(duì)url的查詢參數(shù)即從問(wèn)號(hào) (?)后 開(kāi)始的 URL（查詢部分）進(jìn)行轉(zhuǎn)換
const searchObj = search => JSON.parse(`{"${decodeURIComponent(search.substring(1)).replace(/"/g, '\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`);
// 假如請(qǐng)求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)
格式化查詢字符串得到如下對(duì)象：
12. JS 對(duì)象轉(zhuǎn) url 查詢字符串
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
13.獲取數(shù)組交集
const similarity = (arr, values) => arr.filter(v => values.includes(v)); similarity([1, 2, 3], [1, 2, 4]); // [1,2]
14.檢測(cè)設(shè)備類型
使用正則表達(dá)式來(lái)檢測(cè) navigator.userAgent 屬性判斷設(shè)備是在移動(dòng)設(shè)備還是在臺(tái)式機(jī)/筆記本電腦打開(kāi)。
const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';
15. 將數(shù)字轉(zhuǎn)化為千分位格式
const toDecimalMark = num => num.toLocaleString('en-US');
toDecimalMark(12305030388.9087); // "12,305,030,388.909"
16 多維數(shù)組轉(zhuǎn)一維數(shù)組
const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v))); deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]
17.過(guò)濾對(duì)象數(shù)組
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'}]
18.駝峰字字符串格式化
轉(zhuǎn)換駝峰拼寫(xiě)的字符串為特定格式。
使用 String.replace() 去除下劃線，連字符和空格，并將駝峰拼寫(xiě)格式的單詞轉(zhuǎn)換為全小寫(xiě)。省略第二個(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'
19.是否為絕對(duì)地址
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
20.獲取兩個(gè)日期相差天數(shù)
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9
21.數(shù)組去重
const deDupe = (myArray) => [... new Set(myArray)]; deDupe([1, 1, 2, 1, 3, 3, 4]) // [1, 2, 3, 4]
22.數(shù)組對(duì)象去重
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'}]
23. RGB 顏色轉(zhuǎn) 16進(jìn)制顏色
const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0'); RGBToHex(255, 165, 1); // 'ffa501'
24. 常用密碼組合正則
const passwordReg = /(?!^(d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[w~!@#$%^&*?]{8,20}$/;
// -長(zhǎng)度8~20位字符，支持大小寫(xiě)字母、數(shù)字、符號(hào)三種字符中任意兩種字符的組合
25. 判斷dom元素是否具有某個(gè)className
const hasClass = (el, className) => new RegExp(`(^|\s)${className}(\s|$)`).test(el.className);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
先看一道JavaScript題目，據(jù)說(shuō)是國(guó)內(nèi)某知名互聯(lián)網(wǎng)企業(yè)的JavaScript筆試題，如果對(duì)正則的全局匹配模式不了解的話可能會(huì)對(duì)下面的輸出結(jié)果感到疑惑。2011-04-04
最近這幾天在升級(jí)自己的MVVM 框架,遇到很多小問(wèn)題,所以想著就在這里統(tǒng)一解決了。文中主要介紹了關(guān)于Javascript中with的替代方法與String中的正則方法，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-12-12
簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
package.json俗稱依賴配置文件（我自己取的名）,最主要的作用就是管理項(xiàng)目中所用到的依賴,下面這篇文章主要給大家介紹了關(guān)于package.json屬性的相關(guān)資料,需要的朋友可以參考下2022-02-02
今天小編就為大家分享一篇layui表格內(nèi)容溢出的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
javascript拖拽應(yīng)用實(shí)例（二）
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實(shí)例，拖拽條拖到底，驗(yàn)證碼顯示出來(lái)，感興趣的小伙伴們可以參考一下2016-03-03
改善性能的最好方法之一是避免重復(fù)兩次相同的工作。因此，只要可以緩存結(jié)果供以后使用，就可以加快程序的速度。延遲加載屬性模式技術(shù)使任何屬性都可以成為緩存層以提高性能。這里說(shuō)到的延遲加載屬性模式就是利用的訪問(wèn)器屬性，將計(jì)算昂貴的操作推遲到需要時(shí)再使用2021-06-06
JavaScript實(shí)現(xiàn)x秒后自動(dòng)跳轉(zhuǎn)到一個(gè)頁(yè)面
今天看視頻學(xué)習(xí)時(shí)學(xué)習(xí)了一種新技術(shù)，即平時(shí)我們?cè)谝粋€(gè)頁(yè)面點(diǎn)擊“提交”或“確認(rèn)”會(huì)自動(dòng)跳轉(zhuǎn)到一個(gè)頁(yè)面,在網(wǎng)上搜了一下，關(guān)于這個(gè)技術(shù)處理有多種方法,有興趣的朋友可以參考下2013-01-01
javascript簡(jiǎn)易畫(huà)板開(kāi)發(fā)
這篇文章主要為大家詳細(xì)介紹了javascript簡(jiǎn)易畫(huà)板開(kāi)發(fā)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JS獲取客戶端IP地址、MAC和主機(jī)名的7個(gè)方法匯總
這篇文章主要介紹了JS獲取客戶端IP地址、MAC和主機(jī)名的7個(gè)方法匯總,JS本身是不支持獲取IP地址等信息的,本文通過(guò)其它方法實(shí)現(xiàn),需要的朋友可以參考下2014-07-07