下面為大家介紹我在開發中常用的30個JavaScript單行程式碼，沒有特別的順序。
1.強制布林值
要將變數強制轉換為布林值而不更改其值：
const myBoolean = !! myVariable;
!!null // false
!!undefined // false
!!false // false
!!ture // ture
!!"" // false
!!"string" // true
!!0 // false
!!1 // true
!!{} // true
!![] // true
複製程式碼2.基於某個條件為物件設定屬性
要使用spread運算子有條件地在物件上設定屬性：
const myObject = {... myProperty && {propName：myPoperty}};
let myProperty = 'Jhon'
const myObject = {...myProperty && {propName: myProperty}}; // {propName: "Jhon"}
let myProperty = ''
const myObject = {...myProperty && {propName: myProperty}}; // {}
複製程式碼如果myProperty結果為false，則 && 失敗並且不設定新屬性; 否則，如果不為空，&& 將設定新屬性並覆蓋原來的值。
3.合併物件
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"}
複製程式碼支援無限制合併，但如果物件之間存在相同屬性，則後面屬性會覆蓋前面屬性。*請注意，這僅適用於淺層合併。
4.交換變數
要在不使用中間變數的情況下交換兩個變數的值：
[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.轉換元素型別
要將Number元素轉換為String元素：
const stringArray = numberArray.map(String);
const stringArray = [1, 2, 3].map(String);
["1", "2", "3"]
複製程式碼如果陣列包含字串，字串原樣保留。 這也可以用於將String元素轉換為Number型別：
const numberArray = stringArray.map(Number);
const stringArray = ["1", "2", "3"].map(String);
// [1, 2, 3]
複製程式碼7.格式化物件為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"
}
*/
複製程式碼該字串化命令有三個引數。第一個是Javascript物件。第二個是可選函式，可用於在JSON進行字串化時對其執行操作。最後一個引數指示要新增多少空格作為縮排以格式化JSON。省略最後一個引數，JSON將返回一個長行。如果myObj中存在迴圈引用，則會格式失敗。
8.快速建立數字陣列
要建立一個陣列並用數字填充它，索引為零：
const numArray = Array.from(new Array(10), (x, i)=> i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
複製程式碼9.隨機生成六位數字驗證碼
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 轉 JS 物件
有時候我們會對url的查詢引數即從問號 (?)後 開始的 URL（查詢部分）進行轉換
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)
複製程式碼格式化查詢字串得到如下物件：
12. JS 物件轉 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.獲取陣列交集
const similarity = (arr, values) => arr.filter(v => values.includes(v));
similarity([1, 2, 3], [1, 2, 4]); // [1,2]
複製程式碼14.檢測裝置型別
使用正規表示式來檢測 navigator.userAgent 屬性判斷裝置是在移動裝置還是在桌上型電腦/膝上型電腦開啟。
const detectDeviceType = () =>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop';
複製程式碼15. 將數字轉化為千分位格式
const toDecimalMark = num => num.toLocaleString('en-US');
toDecimalMark(12305030388.9087); // "12,305,030,388.909"
複製程式碼16 多維陣列轉一維陣列
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.過濾物件陣列
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.駝峰字字串格式化
轉換駝峰拼寫的字串為特定格式。
使用 String.replace() 去除下劃線，連字元和空格，並將駝峰拼寫格式的單詞轉換為全小寫。省略第二個引數 separator ，預設使用 _ 分隔符。
const fromCamelCase = (str, separator = '_') =>str.replace(/([a-z\d])([A-Z])/g, '$1' + separator + '$2').replace(/([A-Z]+)([A-Z][a-z\d]+)/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.是否為絕對地址
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.獲取兩個日期相差天數
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9
複製程式碼21.陣列去重
const deDupe = (myArray) => [... new Set(myArray)];
deDupe([1, 1, 2, 1, 3, 3, 4])
// [1, 2, 3, 4]
複製程式碼22.陣列物件去重
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 顏色轉 16進位制顏色
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}$/;
// -長度8~20位字元，支援大小寫字母、數字、符號三種字元中任意兩種字元的組合
複製程式碼25. 判斷dom元素是否具有某個className
const hasClass = (el, className) => new RegExp(`(^|\\s)${className}(\\s|$)`).test(el.className);
複製程式碼參考資料：