各種業(yè)務開發(fā)都離不開對數(shù)據(jù)的處理，然而遇到的很多數(shù)據(jù)都是不好處理的。這個時候就需要尋求搜索引擎的幫助。這種方法效率是非常低下的，而且根據(jù)作者的個性不能保證其對自己的口味。因此這篇文字包含了一份
JS 常用業(yè)務函數(shù)手冊，例如時間格式的處理、用的是哪個手機瀏覽器，手機號、郵箱的驗證，以此來提高你的開發(fā)效率

常用 JS 函數(shù)

1.時間格式化

界面展示的時間千變?nèi)f化, 所以一個處理時間的函數(shù)，它的重要性就不言而喻了。

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 接受倆個參數(shù), oldDate 類型可以是 Date，String，Number。因為現(xiàn)在用時間戳傳遞時間真的是蠻多，也蠻方便的，而JS 是一門弱類型語言，所以我將 String 和 Number 類型的數(shù)據(jù)統(tǒng)一當做時間戳來處理。 fmt 是格式化的類型：yyyy-MM-dd hh:mm，其中的 yyyy | MM | dd | hh | mm 是分別匹配 年 | 月 | 日 | 時 | 分 的關(guān)鍵字。其中的連字符是可以隨意替換的，只展示年月將其他關(guān)鍵字去掉即可。舉幾個例子：

• yyyy年MM月dd -> 2019年09月7日
• hh分mm秒 -> 16分53秒

2.以“天”為單位獲取響應的時間戳

通常都會獲取三天前的時間，12 個以內(nèi)的數(shù)據(jù)，24 小時以內(nèi)的數(shù)據(jù)，因此我弄了一個以天為單位獲取時間戳的函數(shù)

export function setDate(num) { return Date.now() + num * 24 * 60 * 60 * 1000}

時間為正可以獲得未來的時間，時間為負可以獲得過去時間。舉個例子

• 12 個小時之前的時間 -> setDate(-.5)
• 24 個小時之前的時間 -> setDate(-1)
• 三天后的時間 -> setDate(3)

3.獲取 URL 中的參數(shù)

這個需求在三大框架的時代應用貌似不多了，不過面試中問的還是蠻多的，了解一下是好的

簡單實現(xiàn)

var urlParams = new URLSearchParams('?post=1234&action=edit'); console.log(urlParams.get('action')); // "edit"

看了一下瀏覽器支持情況還是蠻好的，除了萬惡的 ie

復雜實現(xiàn)

function getUrlParams(param){// 有賴于瀏覽器環(huán)境， window.location.search 是瀏覽器函數(shù)// 意思是:設置或返回從問號 (?) 開始的 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.topa=3&b=5&c=8888

getUrlParams(‘a(chǎn)’) -> 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. 數(shù)組降維

二維數(shù)組

let arr = [ [1], [2], [3] ] arr = Array.prototype.concat.apply([], arr); // [1, 2, 3]

多維數(shù)組降維

let arr = [1, 2, [3], [[4]]] arr = arr.flat(3) // [1, 2, 3, 4]

flat 有兼容性問題，手機端問題不大。瀏覽器端不兼容 edge。填 Infinity 可展開任意深度的數(shù)組

6.深拷貝

使用變量 a 拷貝對象 b，改變 a 中的值 b 中的值也會跟著改變，這叫做淺拷貝。要想讓 a 獨立于 b 就需要深拷貝

簡易處理

function deepClone() {return JSON.parse(JSON.stringify(obj)) }

既然是簡易處理就有他的不足，上面主要是用了 JSON 的序列化和反序列化。而 JSON 是不支持函數(shù)和 undefined 的因此碰到這些情況會缺失，但是已經(jīng)能夠滿足大部分情況了

復雜處理

復雜處理就需要采用遞歸的方式了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);//遞歸調(diào)用 } else if (isClass(copy) == "Array") { result[key] = arguments.callee(copy); } else { result[key] = obj[key]; } } return result; }

7. 防抖 & 節(jié)流

防抖和節(jié)流屬于高階技巧，業(yè)務中比較多見的場合也就是搜索內(nèi)容改變提示信息。即使不加也也不一定能看出區(qū)別，但是加了新手維護代碼可能會崇拜你哦。

防抖

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);} }

節(jié)流

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. 獲取數(shù)組極值

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 的實現(xiàn)方式

let list = [1, 2, 3, 4, 5] Math.max(...list) // 5 Math.min(...list) // 1

9.判斷小數(shù)是否相等

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; }

用戶輸入的是十進制數(shù)字，計算機保存的是二進制數(shù)。所以計算結(jié)果會有偏差，所以我們不應該直接比較非整數(shù)，而是取其上限，把誤差計算進去。這樣一個上限稱為 machine epsilon，雙精度的標準 epsilon 值是 2^-53 （Math.pow(2, -53)）

總結(jié)：

文中的代碼可能不一定是最優(yōu)代碼，要是你有更好的代碼歡迎評論。

參考資料：

http://www.jianshu.com/p/c8b86b09d…h(huán)ttp://www.cnblogs.com/wxydigua/p/…h(huán)ttp://blog.csdn.net/u014607184/…

http://rockjins.js.org/2017/02/15/…

一些讓 JS 更優(yōu)雅 / 易讀的小技巧

對于工程師來說，代碼是寫一遍、修改很多遍、遍的重要產(chǎn)出，可讀性至關(guān)重要，所以高可讀代碼的重要性不言而喻。

1.用對象代替 switch / if

公共內(nèi)容: let a = 'VIP' 場景 1 if (a === 'VIP') {return 1 } else if (a === 'SVIP') {return 2 } 場景 2 switch(a) { // 感謝 紅山老六 的評論指出這部分代碼的 bug?，F(xiàn)已改正case 'VIP':return 1case 'SVIP':return 2 } 場景 3 let obj = {VIP: 1,SVIP: 2 }

這里只是提供了一種方式，具體的使用場景還是要你自己判斷。我用的比較多的一個場景是狀態(tài)映射中文含義，例如支付狀態(tài)通常獲取的是 1， 2，3，4 這種值，但是列表要求顯示相應的中文狀態(tài) 未支付 | 支付中 | 已退款等等

2. || 和 && 的妙用

// 場景 1 function b(a) {if (a) {return a} else {return ''} } // 場景 2 function b(a) {return a || '' }

上面是 || 的用法，也叫做短路處理。常見于 if 條件中，但是他其實也可以直接用于語句中。當?shù)谝粋€參數(shù)為 true 就會取第一個參數(shù)的值，當?shù)谝粋€參數(shù)不為 true 就會取第二個參數(shù)的值。&& 正好與 || 相反。第一個參數(shù) 為 true 會取第二個參數(shù)的值

總結(jié)

這一部分就只想到了倆個，優(yōu)化空間蠻大的。希望多才多藝的網(wǎng)友紛紛評論獻計讓文章無比壯大起來

原文鏈接：https://juejin.im/post/5d7659c76fb9a06b307068ed

總結(jié)

以上是生活随笔為你收集整理的js 获取url问号前_收下这波 JS 技巧，从此少加班的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。