項目經常使用JS方法封裝--奮鬥的IT青年（微信公衆號）

                                                                                                     歡迎你們關注個人微信公衆號，不定時更新                                                         

   使用方法很是簡單，只需放到你的 utils.js 工具文件中，直接 export const 加上個人封裝方法，在別的文件中使用{方法1,方法2,方法3...}引用後就能夠直接使用了!

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

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

002.冒泡排序

升序 bubbleAsSort()

bubbleAsSort = arr => {
  for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < arr.length - 1 - i; j++) { if (arr[j] > arr[j + 1]) { let temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp; } } } return arr; } 複製代碼

降序 bubbleDeSort()

bubbleDeSort = arr => {
  for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < arr.length - 1 - i; j++) { if (arr[j] < arr[j + 1]) { let temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp; } } } return arr; } 複製代碼

003.選擇排序

升序 selectAsSort()

selectAsSort = arr => {
  let minIndex, temp; for (let i = 0; i < arr.length - 1; i++) { minIndex = i; for (let j = i + 1; j < arr.length; j++) { if (arr[j] < arr[minIndex]) { minIndex = j; } } temp = arr[i]; arr[i] = arr[minIndex]; arr[minIndex] = temp; } return arr; } 複製代碼

降序 selectDeSort()

selectDeSort = arr => {
  let minIndex, temp; for (let i = 0; i < arr.length - 1; i++) { minIndex = i; for (let j = i + 1; j < arr.length; j++) { if (arr[j] > arr[minIndex]) { minIndex = j; } } temp = arr[i]; arr[i] = arr[minIndex]; arr[minIndex] = temp; } return arr; } 複製代碼

004.插入排序

升序 insertAsSort()

insertAsSort = arr => {
  let current, preIndex; for (let i = 1; i < arr.length; i++) { current = arr[i]; preIndex = i - 1; while (preIndex >= 0 && arr[preIndex] > current) { arr[preIndex + 1] = arr[preIndex]; preIndex--; } arr[preIndex + 1] = current; } return arr; } 複製代碼

降序 insertDeSort()

insertDeSort = arr => {
  let current, preIndex; for (let i = 1; i < arr.length; i++) { current = arr[i]; preIndex = i - 1; while (preIndex >= 0 && arr[preIndex] < current) { arr[preIndex + 1] = arr[preIndex]; preIndex--; } arr[preIndex + 1] = current; } return arr; } 複製代碼

005.階乘

factorial = num => {
  let count = 1; for (let i = 1; i <= num; i++) { count *= i; } return count; } 複製代碼

006.兩個數之間累乘

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; } } 複製代碼

007.累加

（）裏面能夠放N個實參

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

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

無參 computeTime(f)

computeTime = code => {
  let startTime = new Date().getTime(); code(); let endTime = new Date().getTime(); let time = endTime - startTime; return time; } 複製代碼

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

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; } 複製代碼

009.數組去重

arrDemp1 = arr => {
  let newArr = []; let m = {}; for (let i = 0; i < arr.length; i++) { let n = arr[i]; if (m[n]) { } else { newArr.push(arr[i]); m[n] = true; } } return newArr; } //遍歷數組法 arrDemp2 = arr => { let temp = []; for (let i = 0; i < arr.length; i++) { //indexOf()方法可返回某個指定的字符串或數組值在字符串或數組中首次出現的位置，若不在其中則返回-1 if (temp.indexOf(arr[i]) === -1) temp.push(arr[i]); } return temp; } //排序法 arrDemp3 = arr => { let temp = []; arr.sort(); temp.push(arr[0]); //由於數組已經通過排序，因此重複元素必定相鄰，判斷當前數組第i個元素與temp的最後一個元素是否相等，不相等時才複製元素 for (let i = 1; i < arr.length; i++) { if (arr[i] != temp[temp.length - 1]) temp.push(arr[i]); } return temp; } //對象法 arrDemp4 = arr => { let temp = []; let json = {}; //將當前數組的元素值看成對象的屬性，遍歷數組，比對對象，若是對象的這個屬性不存在則將當前數組元素複製到臨時數組，並添加該屬性且將屬性值賦值爲1 for (let i = 0; i < arr.length; i++) { if (!json[arr[i]]) {//若是對象沒有該屬性 temp.push(arr[i]); json[arr[i]] = 1;//添加屬性，將屬性值賦值爲1 } } return temp; } 複製代碼

也可使用ES6中的new Set，一步到位

let arr = [1,2,3,5,4,5,4,3,6] let arrDemp = new Set(arr) //arrDemp是一個對象 let newArr = [...arrDemp] //把arrDemp轉化成數組 console.log(newArr); 複製代碼

010.數組對象去重

將對象數組中屬性相同的項去重

/*
*   objArr 對象數組
*   para 將要進行去重的字段(String類型)
*/

測試數據：
let objArr = [{ name: 'a', age: 1 }, { name: 'a', age: 2 }, { name: 'b', age: 2 }] console.log(objArrDemp1(objArr,'name')); // [ { name: 'a', age: 1 }, { name: 'b', age: 2 } ] console.log(objArrDemp1(objArr,'age')); // [ { name: 'a', age: 1 }, { name: 'a', age: 2 } ] objArrDemp1 = (objArr, para) => { let result = []; let temp = {}; for (let i = 0; i < objArr.length; i++) { let parameter = objArr[i][para]; if (temp[parameter]) { continue;//不繼續執行接下來的代碼，跳轉至循環開頭 } temp[parameter] = true;//爲temp添加此屬性（parameter）且將其值賦爲true result.push(objArr[i]);//將這一項複製到結果數組result中去 } return result; } objArrDemp2 = (objArr, para) => { let hash = {}; //reduce方法有兩個參數，第一個參數是一個callback，用於針對數組項的操做；第二個參數則是傳入的初始值，這個初始值用於單個數組項的操做。 objArr = objArr.reduce(function (item, next) {//這是針對數組項操做的函數，對於每一個數組項，reduce方法都會將其調用一次 hash[next[para]] ? '' : hash[next[para]] = true && item.push(next); return item; }, []);//初始值是一個空對象，使用reduce方法返回的是空對象經過疊加執行以後的結果 return objArr; } 複製代碼

011.統計數組中各個元素出現的次數

staArrNum = arr => {
  let obj = {}; for (let i = 0; i < arr.length; i++) { let m = arr[i]; if (obj.hasOwnProperty(m)) { obj[m] += 1; } else { obj[m] = 1; } } return obj; } let arr = [1, 2, 3, 6, 5, 3, 2, 1, 2, 3, 2, 1] console.log(staArrNum(arr)); // { '1': 3, '2': 4, '3': 3, '5': 1, '6': 1 } 複製代碼

012.在數組中找指定的元素,返回下標

arrFinNum = function (arr,num) { let index = -1; for (let i = 0; i < arr.length; i++) { if (num == arr[i]) { index = i; break; } } return index; } let arr = [1,2,3,4,5,6] console.log(arrFinNum(arr,4)); // 3 複製代碼

013.刪除數組中的元素

delArrNum = (arr,val) => {
  let index = arrFinNum(arr, val) //調用了前面自行添加的arrFinNum方法 if (index != -1) { return arr.splice(index, 1); } } 複製代碼

示例

let arr = [1, 2, 3, 4, 5, 6] arrFinNum = (arr, num) => { let index = -1; for (let i = 0; i < arr.length; i++) { if (num == arr[i]) { index = i; break; } } return index; } delArrNum = (arr,val) => { let index = arrFinNum(arr, val) //調用了前面自行添加的arrFinNum方法 if (index != -1) { return arr.splice(index, 1); } } console.log(delArrNum(arr,2)); // [ 2 ] 複製代碼

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

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

015.數字超過99顯示99+

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

016.銀行卡號分割

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

017.二分查找

//非遞歸實現
binarySearch = (arr, key) => {
  let high = arr.length - 1, low = 0; while (low <= high) { let m = Math.floor((high + low) / 2); if (arr[m] == key) { return m; } if (key > arr[m]) { low = m + 1; } else { high = m - 1; } } return false; } let arr = [-1, 1, 3, 4, 5, 8, 32, 234, 12, 42]; console.log(binarySearch(arr, 4)); 複製代碼

//遞歸實現
binarySearch = (arr, low, high, key) => {
  if (low > high) { return -1; } let mid = parseInt((high + low) / 2); if (arr[mid] == key) { return mid; } else if (arr[mid] > key) { high = mid - 1; return binarySearch(arr, low, high, key); } else if (arr[mid] < key) { low = mid + 1; return binarySearch(arr, low, high, key); } }; let arr = [-1, 1, 3, 4, 5, 8, 32, 234, 12, 42]; console.log(binarySearch(arr, 0, 13, 5)); 複製代碼

018.防抖與節流

/**
 * 函數防抖 (只執行最後一次點擊)
 */
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); } } }; 複製代碼

019.深拷貝

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 複製代碼

020.獲取視口尺寸

須要在HTML文件中運行

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 } } } } 複製代碼

021.數字前補零

/**
*   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; } 複製代碼

022.字符替換

能夠替換任意數字和符號

/**
*   str 表示將要替換的字符串
*   l 表示你將要替換的字符
*   r 表示你想要替換的字符
*/
transFormat = (str, l, r) => {
    let reg = new RegExp(l, 'g') // g表示所有替換，默認替換第一個 str = str.replace(reg, r) return str } console.log(transFormat('2019-12-13', '-', '/')); // 2019/12/13 console.log(transFormat('2019-12-13', '-', '')); // 20191213 複製代碼

023.在字符串指定位置插入字符

/**
*   character 原字符串（String）
*   site 要插入的字符的位置 （Number）
*   newStr 想要插入的字符 （String）
*/
insertStr = (character, site, newStr) => {   
  return character.slice(0, site) + newStr + character.slice(site); } console.log(insertStr('20191217',4,'-')); // 2019-1217 複製代碼

024.字符串反轉處理分割

/**
*   str 是你將要進行處理的字符串(String)
*   under 是你根據什麼字符處理(String)
*   event 是你根據什麼字符把處理結果分割(String)
*/
keyCharacterMap = (str,under,event) => {
  return str.split(under).reverse().join(event) } console.log(keyCharacterMap('hello world','','')); // dlrow olleh console.log(keyCharacterMap('hello world',' ','-')); // world-hello 複製代碼

025.格式轉換：base64轉file

/**
*   base64 base64
*   filename 轉換後的文件名
*/
base64ToFile = (base64, filename) => {
  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 File([u8arr], filename, { type: mime }); } 複製代碼

026.格式轉換：base64轉blob

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 }); }; 複製代碼

027.格式轉換：blob轉file

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

028.截取指定字符以前以後的字符串

//  截取指定字符以前的字符串
beforeStrSub = (str, char) => {
  return str.split(char)[0] } // 截取指定字符以後的字符串 afterStrSub = (str, char) => { return str.split(char)[1] } // 測試數據 let str = 'abc:de;fghi.jk'; console.log(beforeStrSub(str, ';')); // abc:de console.log(afterStrSub(str, 'f')); // ghi.jk 複製代碼

029.截取指定字符之間的字符串

/**
*   str 要截取的字符串 (String)
*   start 字符串截取的開始位置 (String)
*   end 字符串截取的結束位置 (String)
*/
betweenStrSub = (str, start, end) => {
  temp = str.split(start, 2);
  content = temp[1].split(end, 2);
  return content[0]; } // 測試數據 let str = 'abc:de;fghi.jk'; console.log(betweenStrSub(str, ':', '.')); // de;fghi console.log(betweenStrSub(str, 'bc', 'k')); // :de;fghi.j console.log(betweenStrSub(str, ':', 'k')); // de;fghi.j 複製代碼

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

/**
 * 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 複製代碼

031.字符串反轉

/**
 *  str 要反轉的字符串
 */
strInversion = str => { 
  str = str + ''; let newStr=[]; newStr=str.split("").reverse().join(""); return newStr } // 測試數據 console.log(strInversion("I Love You!")); // !uoY evoL I 複製代碼

032.對象處理爲數組對象

/**
 *  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 } ] */ 複製代碼

033.經過鍵查找對象數組中對應的下標、鍵、值

/**
 *  arr 對象數組
 *  index 要查找的鍵名
 */
objArrHandle = (arr,keyName) => {
  let sub = arr.findIndex(item=>item[keyName]) let obj = arr[sub] let key = Object.keys(obj)[0] let value = obj[Object.keys(obj)] return '下標：'+sub+' 鍵：'+key+' 值：'+value } // 測試數據 let arr = [{ 20180410: 5 },{ 20180411: 13 },{ 20180412: 26 },{ 20180413: 16 }] console.log(objArrHandle(arr,20180412)); // 下標：2 鍵：20180412 值：26

做者：YXi 連接：https://juejin.im/post/5deb2cdf518825122671b637 來源：掘金 著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。