收下這波 JS 技巧，從此少加班

各種業(yè)務(wù)開發(fā)都離不開對數(shù)據(jù)的處理，然而遇到的很多數(shù)據(jù)都是不好處理的。這個時候就需要尋求搜索引擎的幫助。這種方法效率是非常低下的，而且根據(jù)作者的個性不能保證其對自己的口味。因此這篇文字包含了一份
JS 常用業(yè)務(wù)函數(shù)手冊，例如時間格式的處理、用的是哪個手機(jī)瀏覽器，手機(jī)號、郵箱的驗(yàn)證，以此來提高你的開發(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。因?yàn)楝F(xiàn)在用時間戳傳遞時間真的是蠻多，也蠻方便的，而JS 是一門弱類型語言，所以我將 String 和 Number
類型的數(shù)據(jù)統(tǒng)一當(dā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.以“天”為單位獲取響應(yīng)的時間戳

通常都會獲取三天前的時間，12 個以內(nèi)的數(shù)據(jù)，24 小時以內(nèi)的數(shù)據(jù)，因此我弄了一個以天為單位獲取時間戳的函數(shù)
export function setDate(num) { return Date.now() + num 24 60 60 1000}
時間為正可以獲得未來的時間，時間為負(fù)可以獲得過去時間。舉個例子

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

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

這個需求在三大框架的時代應(yīng)用貌似不多了，不過面試中問的還是蠻多的，了解一下是好的
簡單實(shí)現(xiàn)
var urlParams = new URLSearchParams('?post=1234&action=edit');
console.log(urlParams.get('action')); // "edit"
看了一下瀏覽器支持情況還是蠻好的，除了萬惡的 ie
復(fù)雜實(shí)現(xiàn)
function getUrlParams(param){ // 有賴于瀏覽器環(huán)境， window.location.search 是瀏覽器函數(shù) //
意思是:設(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.手機(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 拷貝對象 b，改變 a 中的值 b 中的值也會跟著改變，這叫做淺拷貝。要想讓 a 獨(dú)立于 b 就需要深拷貝

簡易處理
function deepClone() { return JSON.parse(JSON.stringify(obj)) }
既然是簡易處理就有他的不足，上面主要是用了 JSON 的序列化和反序列化。而 JSON 是不支持函數(shù)和 undefined
的因此碰到這些情況會缺失，但是已經(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ù)中比較多見的場合也就是搜索內(nèi)容改變提示信息。即使不加也也不一定能看出區(qū)別，但是加了新手維護(hù)代碼可能會崇拜你哦。
防抖
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
感謝歲月無影的評論，再此補(bǔ)充用 es6 的實(shí)現(xiàn)方式
let list = [1, 2, 3, 4, 5] Math.max(...list) // 5 Math.min(...list) // 1
9.判斷小數(shù)是否相等
js 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ìn)制數(shù)。所以計算結(jié)果會有偏差，所以我們不應(yīng)該直接比較非整數(shù)，而是取其上限，把誤差計算進(jìn)去。這樣一個上限稱為
machine epsilon，雙精度的標(biāo)準(zhǔn) epsilon 值是 2^-53 （Math.pow(2, -53)）

總結(jié)：
文中的代碼可能不一定是最優(yōu)代碼，要是你有更好的代碼歡迎評論。
參考資料：

www.jianshu.com/p/c8b86b09d…www.cnblogs.com/wxydigua/p/…blog.csdn.net/u014607184/…
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。現(xiàn)已改正 case 'VIP':
return 1 case 'SVIP': return 2 } 場景 3 let obj = { VIP: 1, SVIP: 2 }
這里只是提供了一種方式，具體的使用場景還是要你自己判斷。我用的比較多的一個場景是狀態(tài)映射中文含義，例如支付狀態(tài)通常獲取的是 1， 2，3，4
這種值，但是列表要求顯示相應(yīng)的中文狀態(tài) 未支付 | 支付中 | 已退款等等

2. || 和 && 的妙用
// 場景 1 function b(a) { if (a) { return a } else { return '' } } // 場景 2
function b(a) { return a || '' }
上面是 || 的用法，也叫做短路處理。常見于 if 條件中，但是他其實(shí)也可以直接用于語句中。當(dāng)?shù)谝粋€參數(shù)為 true 就會取第一個參數(shù)的值，當(dāng)?shù)谝粋€參數(shù)不為
true 就會取第二個參數(shù)的值。&& 正好與 || 相反。第一個參數(shù) 為 true 會取第二個參數(shù)的值

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

原文鏈接：https://juejin.im/post/5d7659c76fb9a06b307068ed
<https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fjuejin.im%2Fpost%2F5d7659c76fb9a06b307068ed>

• ? 上一篇： 如何從小白進(jìn)化成 Apache Flink 技術(shù)專家？9節(jié)基礎(chǔ)課程免費(fèi)公開！
• ? 下一篇： 使用NAS動態(tài)存儲卷創(chuàng)建有狀態(tài)應(yīng)用