項目經常使用JS方法封裝(複製粘貼不香嗎？)

時間 2019-12-08

原文原文鏈接

持續更新中...數組

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

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

type = para => {
  return Object.prototype.toString.call(para)
}
console.log(type(1));
複製代碼

002.冒泡排序

升序 bubbleAsSort()app

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()ide

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()ui

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()this

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個實參spa

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

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

無參 computeTime(f)prototype

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.數組去重

arrDemp = 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;
}

let arr = [1,2,3,5,4,5,4,3,6]
console.log(arrDemp(arr));  //  [ 1, 2, 3, 5, 4, 6 ]
複製代碼

也能夠使用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.統計數組中各個元素出現的次數

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

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

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

012.刪除數組中的元素

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

013.時間戳轉化成YMD格式

let date = Date.parse(new Date()) //  獲取當前時間戳(毫秒)

dateFormat = (timestamp, formats) => {
  // formats格式包括
  // 1. Y-m-d
  // 2. Y-m-d H:i:s
  // 3. Y年m月d日
  // 4. Y年m月d日 H時i分
  formats = formats || 'Y-m-d';
  let zero = function (value) {
    if (value < 10) {
      return '0' + value;
    }
    return value;
  };
  let myDate = timestamp ? new Date(timestamp) : new Date();
  let year = myDate.getFullYear();
  let month = zero(myDate.getMonth() + 1);
  let day = zero(myDate.getDate());
  let hour = zero(myDate.getHours());
  let minite = zero(myDate.getMinutes());
  let second = zero(myDate.getSeconds());

  return formats.replace(/Y|m|d|H|i|s/ig, function (matches) {
    return ({
      Y: year,
      m: month,
      d: day,
      H: hour,
      i: minite,
      s: second
    })[matches];
  });
};

console.log(dateFormat(date,'Y-m-d'));
複製代碼

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.年

let date = Date.parse(new Date()) //  獲取當前時間戳(毫秒)

dateY = time =>{
  let newDate = new Date(time);
  let {y}={y:newDate.getFullYear()};
  return `${y}`;
}

console.log(dateY(date));
複製代碼

017.年月

let date = Date.parse(new Date()) //  獲取當前時間戳(毫秒)

dateYM = time => {
  let newDate = new Date(time);
  let { y, m, d } = { y: newDate.getFullYear(), m: newDate.getMonth() + 1, d: newDate.getDate() };
  return `${y}-${m}`;
}

console.log(dateYM(date));
複製代碼

019.年月日

可根據本身需求，本身添加或刪除相應的時間

let date = Date.parse(new Date()) //  獲取當前時間戳(毫秒)

dateymd = time => {
  let newDate = new Date(time);
  let { y, m, d } = { y: newDate.getFullYear(), m: newDate.getMonth() + 1, d: newDate.getDate() };
  return `${y}-${m}-${d}`;
}

console.log(dateymd2(date));
複製代碼

020.年月日時分秒

let date = Date.parse(new Date()) //  獲取當前時間戳(毫秒)

dateTime = time => {
  let newDate = new Date(time);
  let { y, M, d, h, m, s } = { y: newDate.getFullYear(), M: newDate.getMonth() + 1, d: newDate.getDate(), h: newDate.getHours(), m: newDate.getMinutes(), s: newDate.getSeconds() };
  return `${y}-${M}-${d}  ${h}:${m}:${s}`;
}

console.log(dateTime(date));
複製代碼

021.銀行卡號分割

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

022.計算時間N以前

time_filter = time => {
  time -= 0;
  let difTime = new Date().getTime() - time;
  let { h, m } = { h: parseInt(difTime / (3600 * 1000)), m: parseInt(difTime / (60 * 1000)) };
  let msg = "";
  if (h < 1) {
    msg = `${m}分鐘前`;
  } else if (h >= 1 && h <= 24) {
    msg = `${h}小時前`;
  } else if (h > 24) {
    h = parseInt(h / 24)
    msg = `${h}天前`;
  }
  return msg;
}

//輸入一個時間戳，能計算出來是多長時間以前
console.log(time_filter(68464646464));  //17445天前
複製代碼

023.二分查找

//非遞歸實現
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));
複製代碼

024.獲取上週本週下週時間

getDate = n => {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let date = now.getDate();
  let day = now.getDay();
  if (day !== 0) {
    n = n + (day - 1);
  } else {
    n = n + day;
  }
  if (day) {
    if (month > 1) {
      month = month;
    } else {
      year = year - 1;
      month = 12;
    }
  }
  now.setDate(now.getDate() - n);
  year = now.getFullYear();
  month = now.getMonth() + 1;
  date = now.getDate();
  let s =
    year +
    "-" +
    (month < 10 ? "0" + month : month) +
    "-" +
    (date < 10 ? "0" + date : date);
  return s;
}

/***參數都是以週一爲基準的***/
//上週的開始時間
// console.log(getDate(7));
//上週的結束時間
// console.log(getDate(1));
//本週的開始時間
// console.log(getDate(0));
//本週的結束時間
// console.log(getDate(-6));
//下週的開始時間
// console.log(getDate(-7));
//下週結束時間
// console.log(getDate(-13));
複製代碼

025.獲取當前時間(年月日)

getNowDate = () => {
  let nowdate = new Date();
  let y = nowdate.getFullYear();
  let m = nowdate.getMonth() + 1;
  let d = nowdate.getDate();
  return y + "-" + m + "-" + d;
}
複製代碼

026.當前的時間(年月日時分秒)

getDateTime = () => {
  let date = new Date();
  year = date.getFullYear();
  month = date.getMonth() + 1;
  day = date.getDate();
  hour = date.getHours() + 1;
  minute = date.getMinutes();
  second = date.getSeconds();
  month = checkTime(month);
  day = checkTime(day);
  hour = checkTime(hour);
  minute = checkTime(minute);
  second = checkTime(second);
  function checkTime(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  }
  return "" + year + "年" + month + "月" + day + "日" + hour + "時" + minute + "分" + second + "秒"
}

console.log(getDateTime());
複製代碼

027.防抖與節流

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

複製代碼

028.深拷貝

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

029.獲取視口尺寸

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