收下這波 JS 技巧，今後少加班

各類業務開發都離不開對數據的處理，然而遇到的不少數據都是很差處理的。這個時候就須要尋求搜索引擎的幫助。這種方法效率是很是低下的，並且根據做者的個性不能保證其對本身的口味。所以這篇文字包含了一份 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) // 1
複製代碼

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.jianshu.com/p/c8b86b09d…

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 會取第二個參數的值

總結

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

全文總結

感受對知識的梳理和概括又提升了一步，同時又能少加會班了。不知不覺一個月過去了也寫了四篇提升編程開發效率的文章了，文章也有不少不足的地方，爲了你們的後期討論方便，能夠加我微信，帶你進羣，你們一塊兒討論研究，快樂成長。