各種業務開發都離不開對數據的處理，然而遇到的很多數據都是不好處理的。這個時候就需要尋求搜索引擎的幫助。這種方法效率是非常低下的，而且根據作者的個性不能保證其對自己的口味。因此這篇文字包含了一份 JS 常用業務函數手冊，例如時間格式的處理、用的是哪個手機瀏覽器，手機號、郵箱的驗證，以此來提高你的開發效率
常用 JS 函數
1.時間格式化
界面展示的時間千變萬化, 所以一個處理時間的函數，它的重要性就不言而喻了。
export function formatDate (oldDate, fmt) { let date = new Date() if (typeof oldDate === 'string' || typeof oldDate === 'number') { date = new Date(+oldDate) } else { date = oldDate } if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() } function padLeftZero (str) { return ('00' + str).substr(str.length) } for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + '' fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)) } } return fmt }
formatDate 接受倆個參數, oldDate 類型可以是 Date，String，Number。因為現在用時間戳傳遞時間真的是蠻多，也蠻方便的，而JS 是一門弱類型語言，所以我將 String 和 Number 類型的數據統一當做時間戳來處理。 fmt 是格式化的類型：yyyy-MM-dd hh:mm，其中的 yyyy | MM | dd | hh | mm 是分別匹配 年 | 月 | 日 | 時 | 分 的關鍵字。其中的連字符是可以隨意替換的，只展示年月將其他關鍵字去掉即可。舉幾個例子：
- yyyy年MM月dd -> 2019年09月7日
- hh分mm秒 -> 16分53秒
2.以“天”為單位獲取響應的時間戳
通常都會獲取三天前的時間，12 個以內的數據，24 小時以內的數據，因此我弄了一個以天為單位獲取時間戳的函數
export function setDate(num) { return Date.now() + num * 24 * 60 * 60 * 1000}
時間為正可以獲得未來的時間，時間為負可以獲得過去時間。舉個例子
- 12 個小時之前的時間 -> setDate(-.5)
- 24 個小時之前的時間 -> setDate(-1)
- 三天后的時間 -> setDate(3)
3.獲取 URL 中的參數
這個需求在三大框架的時代應用貌似不多了，不過面試中問的還是蠻多的，了解一下是好的
簡單實現
var urlParams = new URLSearchParams('?post=1234&action=edit'); console.log(urlParams.get('action')); // "edit"
看了一下瀏覽器支持情況還是蠻好的，除了萬惡的 ie
復雜實現
function getUrlParams(param){ // 有賴於瀏覽器環境， window.location.search 是瀏覽器函數 // 意思是:設置或返回從問號 (?) 開始的 URL（查詢部分）。 var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == param){return pair[1];} } return(false); }
舉個例子： http://xuyuechao.top?a=3&b=5&c=8888
- getUrlParams('a') -> 3
- getUrlParams('b') -> 5
- getUrlParams('c') -> 8888
4.手機端判斷瀏覽器類型
BrowserInfo = { isAndroid: Boolean(navigator.userAgent.match(/android/ig)), isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)), isIpad: Boolean(navigator.userAgent.match(/ipad/ig)), isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)), isAli: Boolean(navigator.userAgent.match(/AlipayClient/ig)), isPhone: Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) }
目前主要支持 安卓 & 蘋果 & ipad & 微信 & 支付寶 & 是否是手機端。
5. 數組降維
二維數組
let arr = [ [1], [2], [3] ] arr = Array.prototype.concat.apply([], arr); // [1, 2, 3]
多維數組降維
let arr = [1, 2, [3], [[4]]] arr = arr.flat(3) // [1, 2, 3, 4]
flat 有兼容性問題，手機端問題不大。瀏覽器端不兼容 edge。填 Infinity 可展開任意深度的數組
6.深拷貝
使用變量 a 拷貝對象 b，改變 a 中的值 b 中的值也會跟着改變，這叫做淺拷貝。要想讓 a 獨立於 b 就需要深拷貝
簡易處理
function deepClone() { return JSON.parse(JSON.stringify(obj)) }
既然是簡易處理就有他的不足，上面主要是用了 JSON 的序列化和反序列化。而 JSON 是不支持函數和 undefined 的因此碰到這些情況會缺失，但是已經能夠滿足大部分情況了
復雜處理
復雜處理就需要采用遞歸的方式了
function deepClone(obj) { function isClass(o) { if (o === null) return "Null"; if (o === undefined) return "Undefined"; return Object.prototype.toString.call(o).slice(8, -1); } var result; var oClass = isClass(obj); if (oClass === "Object") { result = {}; } else if (oClass === "Array") { result = []; } else { return obj; } for (var key in obj) { var copy = obj[key]; if (isClass(copy) == "Object") { result[key] = arguments.callee(copy);//遞歸調用 } else if (isClass(copy) == "Array") { result[key] = arguments.callee(copy); } else { result[key] = obj[key]; } } return result; }
7. 防抖 & 節流
防抖和節流屬於高階技巧，業務中比較多見的場合也就是搜索內容改變提示信息。即使不加也也不一定能看出區別，但是加了新手維護代碼可能會崇拜你哦。
防抖
function debounce(func, wait) { let timeout; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args) }, wait); } }
節流
function throttle(func, wait) { let previous = 0; return function() { let now = Date.now(); let context = this; let args = arguments; if (now - previous > wait) { func.apply(context, args); previous = now; } } }
8. 獲取數組極值
function smallest(array){ return Math.min.apply(Math, array); } function largest(array){ return Math.max.apply(Math, array); } smallest([0, 1, 2.2, 3.3]); // 0 largest([0, 1, 2.2, 3.3]); // 3.3
感謝歲月無影的評論，再此補充用 es6 的實現方式
let list = [1, 2, 3, 4, 5] Math.max(...list) // 5 Math.min(...list) // 19.判斷小數是否相等
function epsEqu(x,y) { return Math.abs(x - y) < Math.pow(2, -52); } // 舉例 0.1 + 0.2 === 0.3 // false epsEqu(0.1 + 0.2, 0.3) // true
感謝 IAmFineThanks 提供的 Number.EPSILON ，Number.EPSILON === Math.pow(2, -52)因此上述方法也可以這么寫
function epsEqu(x,y) { return Math.abs(x - y) < Number.EPSILON; }
用戶輸入的是十進制數字，計算機保存的是二進制數。所以計算結果會有偏差，所以我們不應該直接比較非整數，而是取其上限，把誤差計算進去。這樣一個上限稱為 machine epsilon，雙精度的標准 epsilon 值是 2^-53 （Math.pow(2, -53)）
總結：
文中的代碼可能不一定是最優代碼，要是你有更好的代碼歡迎評論。
參考資料：
一些讓 JS 更優雅 / 易讀的小技巧
對於工程師來說，代碼是寫一遍、修改很多遍、閱讀更多遍的重要產出，可讀性至關重要，所以高可讀代碼的重要性不言而喻。
1.用對象代替 switch / if
公共內容: let a = 'VIP' 場景 1 if (a === 'VIP') { return 1 } else if (a === 'SVIP') { return 2 } 場景 2 switch(a) { // 感謝 紅山老六 的評論指出這部分代碼的 bug。現已改正 case 'VIP': return 1 case 'SVIP': return 2 } 場景 3 let obj = { VIP: 1, SVIP: 2 }
這里只是提供了一種方式，具體的使用場景還是要你自己判斷。我用的比較多的一個場景是狀態映射中文含義，例如支付狀態通常獲取的是 1， 2，3，4 這種值，但是列表要求顯示相應的中文狀態 未支付 | 支付中 | 已退款等等
2. || 和 && 的妙用
// 場景 1 function b(a) { if (a) { return a } else { return '' } } // 場景 2 function b(a) { return a || '' }
上面是 || 的用法，也叫做短路處理。常見於 if 條件中，但是他其實也可以直接用於語句中。當第一個參數為 true 就會取第一個參數的值，當第一個參數不為 true 就會取第二個參數的值。&& 正好與 || 相反。第一個參數 為 true 會取第二個參數的值