前端项目常用工具方法梳理

骚饼

已于 2023-10-28 15:17:01 修改

阅读量57

点赞数 2

分类专栏： js 文章标签：前端 javascript html

于 2023-03-13 18:01:26 首次发布

本文链接：https://blog.csdn.net/qq_36798133/article/details/129500036

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

时间相关

格式化时间


/**
 * @param { 时间戳 } result
 * @returns 时间戳转换输出xx天xx小时xx分xx秒
 */
const formatSeconds = (result) => {
  const d = Math.floor(result / (60 * 60 * 24));
  const h = Math.floor((result % (60 * 60 * 24)) / (60 * 60));
  const m = Math.floor((result % (60 * 60)) / 60);
  const s = Math.floor(result % 60);
  if (d && h && m && s) {
    return `${d}${'天'}${h}${'小时'}${m}${'分'}${s}${'秒'}`;
  }
  if (h && m && s) {
    return `${h}${'小时'}${m}${'分'}${s}${'秒'}`;
  }
  if (m && s) {
    return `${m}${'分'}${s}${'秒'}`;
  }
  if (s) {
    return `${s}${'秒'}`;
  }
  return '-';
};

获取指定时间的明天时间


/**
 * @param {Date} date 需要进行获取的时间 new Date('2019-09-10')
 * @return {Date} 明天的时间内容 
 */
const getTommorwDay = (date) => {
  let yesterday_milliseconds = date.getTime() + 1000 * 60 * 60 * 24,yesterday = new Date();
  yesterday.setTime(yesterday_milliseconds);
  let year = yesterday.getFullYear(),day = yesterday.getDate(),month = yesterday.getMonth() + 1;
  if (day < 10)day = "0" + day; 
  if (strMonth < 10)strMonth = "0" + strMonth;
  return year + "-" + month + "-" + month;
}

获取指定时间的昨天时间


/**
 * @param {Date} date 需要进行获取的时间
 * @return {Date} 处理以后的昨天时间
 */
const getYestoday = (date) => {
    var yesterday_milliseconds = date.getTime() - 1000 * 60 * 60 * 24,yesterday = new Date();
    yesterday.setTime(yesterday_milliseconds);
    var year = yesterday.getFullYear(),day = yesterday.getDate(),month = yesterday.getMonth() + 1;
    if (day < 10) day = "0" + day;
    if (month < 10)month = "0" + month;
    return year + "-" + month + "-" + day;
}

获取某个月最后一天日


/**
 * @param {String} year 需要获取的年
 * @param {String} month 需要获取的月
 * @return {String} 获取当前年月的最后一天
 */
const getMonthDate = (year,month) => {
    var new_year = year; //取当前的年份
    var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）
    if (month > 12) {//如果当前大于12月，则年份转到下一年
        new_month -= 12; //月份减
        new_year++; //年份增
    }
    var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天
    return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期
}

数组相关

获取数组中不同的内容


/**
 * @param {Array} arr1 需要进行比对的数组1
 * @param {Array} arr2 需要进行比对的数组2
 * @return {Array} 两个数组中不同的内容
 */
const getArrDifference(arr1, arr2) {
    return arr1.concat(arr2).filter(function(v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
    });
}

素数组去重


/**
 * @param {Array} array 需要进行去重的数组
 * @return {Array} 去重以后的数组
 */
const uniq = (array) => {
    var temp = [];
    for (var i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) == -1) {
        temp.push(array[i]);
        }
    }
    return temp;
}

对象数组去重


/**
 * @param {Array} array 需要进行去重的数组
 * @return {Array} 去重以后的数组
 */
const uniqObjArray = (array) => {
    let allArr = [];
    for (var i = 0; i < oldArr.length; i++) {
        var flag = true;
        for (var j = 0; j < allArr.length; j++) {
            if (oldArr[i]["value"] == allArr[j]["value"]) {
                flag = false;
            }
        }
        if (flag)allArr.push(oldArr[i]);
    }
    return allArr;
}
const uniqObjArray = (array) => {
   const res = new Map();
   return arr.filter((arr) => !res.has(arr.name) && res.set(arr.name, 1));
}
/**
 * @param { 原始array数据 } dataList
 * @param { 根据这个key来进行去重 } key
 * @returns
 */
const arrayObjUnique = (dataList, key) => {
  let hasObj = {}
  return dataList.reduce((cur, next) => {
    hasObj[next[key]] ? '' : (hasObj[next[key]] = true && cur.push(next))
    return cur
  }, [])
}
/**
 * @param { 原始array数据 } dataList
 * @param { 根据这个key来进行去重 } key
 * @returns
 */
const arrayObjUnique = (dataList, key) => {
  return dataList.filter((element, index, self) => {
    return self.findIndex(x => x[key] === element[key]) === index
  })
}

对象相关

对象序列化(对象转成url参数)

函数相关

防抖函数


/**
 * @param {function} fn 需要进行防抖处理的函数 
 */
const debounce = (fn) => {
    let timeout = null; // 创建一个标记用来存放定时器的返回值
    return function() {
        clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => {
            fn.apply(this, arguments); //使用apply的原因是为了后续调用不改变this的指向，指向input，而不是window
        }, 500);
    };
}
//默认需要进行处理的函数
const todo = () =>{
    //do something
}
//默认加载初始化
var inp = document.getElementById("inp");
inp.addEventListener("input", debounce(todo));

节流函数


/**
 * @param {function} fn 需要进行处理节流的函数
 */
const throttle = (fn) => {
  let canRun = true;
  return function() {
    if (!canRun) return; 
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, 500);
  };
}
//默认需要进行处理的函数
const todo  = () => {
    //do something
}
//默认初始化进行加载
var inp = document.getElementById("inp");
inp.addEventListener("input", debounce(todo));

浏览器相关

获取浏览器型号


/**
 * @return {String} 浏览器型号 
 */
const getBrowserInfo = () => {
    var Sys = {},ua = navigator.userAgent.toLowerCase(),re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/,m = ua.match(re);
    try {
        Sys.browser = m[1].replace(/version/, "'safari");
        Sys.ver = m[2];
    } catch (e) {
        console.log("getBrowserInfo fail.");
    }
    return Sys;
}

获取浏览器的url参数

/**
 * 默认获取浏览器url中所携带的参数
 * @param {String} v1 需要处理的url[可选参数]
 * @returns {Object} 将所携带的参数处理为对象返回
 */
export const obtainUrlParams = (v1) => {
  const ifurl = v1 || window.location.href
  const urlObj = {}
  if (ifurl.indexOf('?') > -1) {
    const urlMess = ifurl.split('?')[1]
    // urlMess = unescape(urlMess);
    if (urlMess.indexOf('&') > -1) {
      const urlArr = urlMess.split('&')
      for (let i = 0; i < urlArr.length; i++) {
        if (urlArr[i].indexOf('=') > -1) {
          urlObj[urlArr[i].split('=')[0]] = urlArr[i].split('=')[1]
        }
      }
    } else {
      if (urlMess.indexOf('=') > -1) {
        urlObj[urlMess.split('=')[0]] = urlMess.split('=')[1]
      }
    }
  }
  return urlObj
}