當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

js 获取url问号前_收下这波 JS 技巧，从此少加班

發(fā)布時(shí)間：2025/3/12 javascript 12 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 获取url问号前_收下这波 JS 技巧，从此少加班小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

常用 JS 函數(shù)

1.時(shí)間格式化

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

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

2.以“天”為單位獲取響應(yīng)的時(shí)間戳

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

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

時(shí)間為正可以獲得未來的時(shí)間，時(shí)間為負(fù)可以獲得過去時(shí)間。舉個(gè)例子

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

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

這個(gè)需求在三大框架的時(shí)代應(yīng)用貌似不多了，不過面試中問的還是蠻多的，了解一下是好的

簡(jiǎn)單實(shí)現(xiàn)

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

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

復(fù)雜實(shí)現(xiàn)

舉個(gè)例子： http://xuyuechao.topa=3&b=5&c=8888

getUrlParams(‘a(chǎn)’) -> 3

getUrlParams(‘b’) -> 5

getUrlParams(‘c’) ->8888

4.手機(jī)端判斷瀏覽器類型

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 & 微信 & 支付寶 & 是否是手機(jī)端。

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 有兼容性問題，手機(jī)端問題不大。瀏覽器端不兼容 edge。填 Infinity 可展開任意深度的數(shù)組

6.深拷貝

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

簡(jiǎn)易處理

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

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

復(fù)雜處理

復(fù)雜處理就需要采用遞歸的方式了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è)務(wù)中比較多見的場(chǎng)合也就是搜索內(nèi)容改變提示信息。即使不加也也不一定能看出區(qū)別，但是加了新手維護(hù)代碼可能會(huì)崇拜你哦。

防抖

節(jié)流

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

感謝歲月無影的評(píng)論，再此補(bǔ)充用 es6 的實(shí)現(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; }

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

總結(jié)：

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

參考資料：

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)雅 / 易讀的小技巧

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

1.用對(duì)象代替 switch / if

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

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

2. || 和 && 的妙用

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

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

總結(jié)

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

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

總結(jié)

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

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

上一篇：新闻资讯java开发_新闻资讯app开发
下一篇： bootstrap 输入错误提示_win