各種業務開發都離不開對資料的處理，然而遇到的很多資料都是不好處理的。這個時候就需要尋求搜尋引擎的幫助。這種方法效率是非常低下的，而且根據作者的個性不能保證其對自己的口味。因此這篇文字包含了一份
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);

}

舉個例子：

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

感謝歲月無影的評論，再此補充用 es6 的實現方式

let list = [1, 2, 3, 4, 5]

Math.max(...list) // 5

Math.min(...list)

9.判斷小數是否相等

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)）

總結：

文中的程式碼可能不一定是最優程式碼，要是你有更好的程式碼歡迎評論。
參考資料：
…www.cnblogs.com/wxydigua/p/…blog.csdn.net/u014607184/…
rockjins.js.org/2017/02/15/…

一些讓 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 會取第二個引數的值

總結

這一部分就只想到了倆個，最佳化空間蠻大的。希望多才多藝的網友紛紛評論獻計讓文章無比壯大起來

原文連結：

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