持續更新中...

常用JS方法封裝方法預告：

• 項目常用JS方法封裝(二) [ 時間處理 ]
• 項目常用JS方法封裝(三) [ 字符串相關處理 ]
• 項目常用JS方法封裝(四) [ 數組相關處理 ]

使用方法非常簡單，只需放到你的 utils.js 工具文件中，直接 export const 加上我的封裝方法，在別的文件中使用{方法1,方法2,方法3...}引用後就可以直接使用了!

001.輸入一個值,返回其數據類型

<code>type = para => {
  return Object.prototype.toString.call(para).slice(8,-1)  
}
複製代碼/<code>

002.階乘

<code>factorial = num => {
  let count = 1;
  for (let i = 1; i <= num; i++) {
    count *= i;
  }
  return count; 

}
複製代碼/<code>

003.兩個數之間累乘

<code>multBetride = (x, y) => {
  let count;
  if (x < y) {
    count = x;
    for (let i = x + 1; i <= y; i++) {
      count *= i;
    }
    return count;
  } else {
    count = y;
    for (let i = y + 1; i <= x; i++) {
      count *= i;
    }
    return count;
  }
}
複製代碼/<code>

004.累加

（）裡面可以放N個實參

<code>function cumsum() {
    let sum = 0;
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
複製代碼/<code>

005.計時器(計算代碼塊(函數)執行時間)

無參 computeTime(f)

<code>computeTime = code => {
  let startTime = new Date().getTime();
  code();
  let endTime = new Date().getTime(); 

  let time = endTime - startTime;
  return time;
}
複製代碼/<code>

有參 computeTime(f) 使用方法:computeTime(f,參數1,參數2......)

<code>computeTime = f => {
  let startTime = new Date().getTime();
  let p = [];
  for (let i = 1; i < arguments.length; i++) {
    p.push(arguments[i])
  }
  f.apply(null, p)
  let endTime = new Date().getTime();
  let Time = endTime - startTime;
  return Time;
}
複製代碼/<code>

006.數字超過9顯示省略號

<code>num_filter = val =>{
  val = val?val-0:0;
  if (val > 9 ) {
    return "…"
  }else{
    return val;
  }
}
複製代碼/<code>

007.數字超過99顯示99+

<code>ninenum_filter = val =>{
  val = val?val-0:0;
  if (val > 99 ) {
    return "99+"
  }else{
    return val;
  }
}
複製代碼/<code>

008.銀行卡號分割

<code>bank_filter = val =>{
  val += '';
  val = val.replace(/(\\s)/g,'').replace(/(\\d{4})/g,'$1 ').replace(/\\s*$/,'');
  return val;
}
複製代碼/<code>

009.防抖與節流

<code>/**
 * 函數防抖 (只執行最後一次點擊)
 */
Debounce = (fn, t) => {
    let delay = t || 500;
    let timer;
    return function () {
        let args = arguments;
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            timer = null;
            fn.apply(this, args);
        }, delay);
    }
};
/*
 * 函數節流
 */
Throttle = (fn, t) => {
    let last;
    let timer;
    let interval = t || 500;
    return function () {
        let args = arguments;
        let now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                last = now;
                fn.apply(this, args);
            }, interval);
        } else {
            last = now;
            fn.apply(this, args); 

        }
    }
};

複製代碼/<code>

010.深拷貝

<code>deepClone = source => {
  const targetObj = source.constructor === Array ? [] : {}; // 判斷複製的目標是數組還是對象
  for (let keys in source) { // 遍歷目標
    if (source.hasOwnProperty(keys)) {
      if (source[keys] && typeof source[keys] === 'object') { // 如果值是對象，就遞歸一下
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = deepClone(source[keys]);
      } else { // 如果不是，就直接賦值
        targetObj[keys] = source[keys];
      }
    }
  }
  return targetObj;
}

let str1 = {
  arr: [1, 2, 3],
  obj: {
    key: 'value'
  },
  fn: function () {
    return 1;
  }
};
let str3 = deepClone(str1);

console.log(str3 === str1); // false
console.log(str3.obj === str1.obj); // false
console.log(str3.fn === str1.fn); // true
複製代碼/<code>

011.獲取視口尺寸

需要在HTML文件中運行

<code>function getViewportOffset() {
    if (window.innerWidth) {
        return {
            w: window.innerWidth,
            h: window.innerHeight
        }
    } else {
        // ie8及其以下
        if (document.compatMode === "BackCompat") {
            // 怪異模式
            return {
                w: document.body.clientWidth,
                h: document.body.clientHeight
            }
        } else {
            // 標準模式
            return {
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeight
            }
        }
    }
}
複製代碼/<code>

012.數字前補零

<code>/**
*   num為你想要進行填充的數字
*   length為你想要的數字長度
*/

//迭代方式實現
padding1=(num, length)=> {
  for(let len = (num + "").length; len < length; len = num.length) {
      num = "0" + num;            
  }
  return num;
}

//遞歸方式實現
padding2=(num, length) =>{
  if((num + "").length >= length) {
      return num; 

  }
  return padding2("0" + num, length)
}

//轉為小數
padding3=(num, length)=> {
  let decimal = num / Math.pow(10, length);
  //toFixed指定保留幾位小數
  decimal = decimal.toFixed(length) + "";
  return decimal.substr(decimal.indexOf(".")+1);
}

//填充截取法
padding4=(num, length)=> {
  //這裡用slice和substr均可
  return (Array(length).join("0") + num).slice(-length);
}

//填充截取法
padding5=(num, length)=> {
  let len = (num + "").length;
  let diff = length+1 - len;
  if(diff > 0) {
      return Array(diff).join("0") + num;
  }
  return num;
}
複製代碼/<code>

013.格式轉換：base64轉file

<code>/**
*   base64 base64
*   filename 轉換後的文件名
*/
base64ToFile = (base64, filename )=> {
  let arr = base64.split(',')
  let mime = arr[0].match(/難過.*?);/)[1]
  let suffix = mime.split('/')[1] // 圖片後綴
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  } 

  return new File([u8arr], `${filename}.${suffix}`, { type: mime })
}
複製代碼/<code>

014.格式轉換：base64轉blob

<code>base64ToBlob = base64 => {
  let arr = base64.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
};
複製代碼/<code>

015.格式轉換：blob轉file

<code>blobToFile = (blob, fileName) => {
  blob.lastModifiedDate = new Date();
  blob.name = fileName;
  return blob;
};
複製代碼/<code>

016.格式轉換：file轉base64

<code>/**
 * file 圖片文件
 * 返回圖片的Base64數據
 */
fileToBase64 = file => {
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    return e.target.result
  };
}
複製代碼/<code>

017.獲取地址欄傳遞過來的參數

<code>/**
 * name為地址欄傳遞過來的字段名
 */
getQueryString = name => {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  let r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]); return null;
}

//  測試
// http://localhost:3306/admin?id=111&name=xxx
// console.log(getQueryString('id'));  // 111
// console.log(getQueryString('name'));  // xxx
複製代碼/<code>

018.對象處理為數組對象

<code>/**
 *  obj 需要處理的對象
 */
objToArrObj = obj => {
  let arr = []
  for(let i in obj){
    arr.push({[i]:obj[i]})
  }
  return arr
}

//  測試數據
let obj = {20180410: 5, 20180411: 13, 20180412: 26, 20180413: 16}
console.log(objToArrObj(obj));
/*
  [
    { 20180410: 5 },
    { 20180411: 13 },
    { 20180412: 26 },
    { 20180413: 16 }
  ]
*//<code>

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

閱讀更多 Echa攻城獅 的文章

關鍵字: 封裝 複製 常用