js实用工具代码(纯代码)

js实用工具代码(纯代码)

💨防抖/节流

📌简单介绍

• 防抖：指定时间内 频繁触发一个事件，以最后一次触发为准
• 节流：指定时间内 频繁触发一个事件，只会触发一次

应用场景有很多比如:
防抖是： input搜索，用户在不断输入内容的时候，用防抖来减少请求的次数并且节约请求资源

节流：场景普遍就是按钮点击，一秒点击 10 下会发起 10 次请求，节流以后 1 秒点再多次，都只会触发一次

    // 防抖
    // fn 需要防抖的函数，delay 为定时器时间
    function debounce(fn,delay){
        let timer =  null  // 用于保存定时器
        return function () { 
            // 如果timer存在 就清除定时器，重新计时
            if(timer){
                clearTimeout(timeout);
            }
            //设置定时器，规定时间后执行真实要执行的函数
            timeout = setTimeout(() => {
               fn.apply(this);
            }, delay);
        }
    }
    
    // 节流
    function throttle(fn) {
      let timer = null; // 首先设定一个变量，没有执行定时器时,默认为 null
      return function () {
        if (timer) return; // 当定时器没有执行的时候timer永远是false,后面无需执行
        timer = setTimeout(() => {
          fn.apply(this, arguments);
           // 最后在setTimeout执行完毕后再把标记设置为true(关键)
           // 表示可以执行下一次循环了。
          timer = null;
        }, 1000);
      };
    }

🚫 过滤特殊字符

function filterCharacter(str){
        // 首先设置一个模式
        let pattern = new RegExp("[`~!@#$^&*()=：”“'。，、？|{}':;'%,\\[\\].<>/?~！@#￥……&*（）&;—|{ }【】‘；]")
        let resultStr = "";
        for (let i = 0; i < str.length; i++) {
            // 主要通过 replace ，pattern 规则 去把字符替换成空 最后拼接在 resultStr
            resultStr = resultStr + str.substr(i, 1).replace(pattern, '');
        }
        // 当循环结束的时候返回最后结果 resultStr
        return resultStr;
    }
    
    // 示例
filterCharacter('gyaskjdhy12316789#$%^&!@#1=123,./[') // 结果:gyaskjdhy123167891123

❗常用正则判断

// 校验2-9位文字 不符合为 false  符合为 true
const validateName = (name) => {
  const reg = /^[\u4e00-\u9fa5]{2,9}$/;
  return reg.test(name);
};

// 校验手机号
const validatePhoneNum = (mobile) => {
  const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
  return reg.test(mobile);
};

// 校验6到18位大小写字母数字下划线组成的密码
const validatePassword = (password) => {
  const reg = /^[a-zA-Z0-9_]{6,18}$/;
  return reg.test(password);
};

🕐时间相关

//获取当前时间年月日
getCurrentTime() {
      var currentDate = new Date();
      return (
        currentDate.getFullYear() +
        "-" +
        (currentDate.getMonth() + 1) +
        "-" +
        currentDate.getDate()
      );
}
//获取当前时间年月日时分秒
getCurrentTime() {
      var date = new Date(); //当前时间
      var year = date.getFullYear(); //返回指定日期的年份
      var month = this.repair(date.getMonth() + 1); //月
      var day = this.repair(date.getDate()); //日
      var hour = this.repair(date.getHours()); //时
      var minute = this.repair(date.getMinutes()); //分
      var second = this.repair(date.getSeconds()); //秒

      //当前时间
      var curTime =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;
      return curTime;
}

// 获取前n天日期
function getBeforeDate=()=>{
  var n = n;
  var d = new Date();
  var year = d.getFullYear();
  var mon = d.getMonth() + 1;
  var day = d.getDate();
  if (day <= n) {
    if (mon > 1) {
      mon = mon - 1;
    } else {
      year = year - 1;
      mon = 12;
    }
  }
  d.setDate(d.getDate() - n);
  year = d.getFullYear();
  mon = d.getMonth() + 1;
  day = d.getDate();
  const s = year + '-' + (mon < 10 ? '0' + mon : mon) + '-' + (day < 10 ? '0' + day : day);
  return s;
}
//根据不同时间的消息，输出不同的时间格式
toggleTime(date) {
      var time;
      var type = this.getDateDiff(date);
      //1：新消息，2：当天消息,3：昨天消息，4：今年消息，5：其他消息
      if (type == 1) {
        time = "刚刚"; //新消息，不显示时间，但是要显示"以下为最新消息"
      } else if (type == 2) {
        time = dayjs(date).format("H:mm"); //当天消息，显示：10:22
      } else if (type == 3) {
        time = dayjs(date).format("昨天 H:mm"); //昨天消息，显示：昨天 20:41
      } else if (type == 4) {
        time = dayjs(date)
          .format("M月D日 AH:mm")
          .replace("AM", "上午")
          .replace("PM", "下午"); //今年消息，上午下午，显示：3月17日 下午16:45
      } else if (type == 5) {
        time = dayjs(date)
          .format("YYYY年M月D日 AH:mm")
          .replace("AM", "上午")
          .replace("PM", "下午"); //其他消息，上午下午，显示：2020年11月2日 下午15:17
      }
      return time;
}
//判断消息类型
getDateDiff(date) {
      var nowDate = dayjs(new Date()); //当前时间
      var oldDate = dayjs(new Date(date)); //参数时间
      var result;
      if (nowDate.year() - oldDate.year() >= 1) {
        result = 5;
      } else if (
        nowDate.month() - oldDate.month() >= 1 ||
        nowDate.date() - oldDate.date() >= 2
      ) {
        result = 4;
      } else if (nowDate.date() - oldDate.date() >= 1) {
        result = 3;
      } else if (
        nowDate.hour() - oldDate.hour() >= 1 ||
        nowDate.minute() - oldDate.minute() >= 5
      ) {
        result = 2;
      } else {
        result = 1;
      }
      return result;
}
//根据两个日期，判断相差天数
function daysBetween = (sDate1, sDate2) => {
  var time1 = Date.parse(new Date(sDate1));
  var time2 = Date.parse(new Date(sDate2));
  var nDays = Math.abs(parseInt((time2 - time1) / 1000 / 3600 / 24));
  return nDays;
}
//时间戳转换时间
function getdate= (date) => {
  var now = new Date(date),
    y = now.getFullYear(),
    m = now.getMonth() + 1,
    d = now.getDate();
  return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + now.toTimeString().substr(0, 8);
}
/**
 * 获取本周周一和周日日期
 */
getCurrentWeek() {
  const start = moment().weekday(1).format('YYYY-MM-DD'); //本周一
  const end = moment().weekday(7).format('YYYY-MM-DD'); //本周日
  return [start, end]
},

/**
 * 获取前 i 周的周一和周日日期，并以数组的方式返回。
 * 当 i=1，获取的是上周一和上周日的日期；
 * 当 i=2，获取的是上上周一和上上周日的日期
 * ...以此类推
 * @param i
 */
getLastWeek(i) {
  let weekOfDay = parseInt(moment().format('E'));//计算今天是这周第几天
  let last_monday = moment().subtract(weekOfDay + 7 * i - 1, 'days').format('YYYY-MM-DD');//周一日期
  let last_sunday = moment().subtract(weekOfDay + 7 * (i - 1), 'days').format('YYYY-MM-DD');//周日日期
  return [last_monday, last_sunday]
},

/**
 * 获取后 i 周的周一和周日日期，并以数组的方式返回。
 * 当 i=1，获取的是下周一和下周日的日期；
 * 当 i=2，获取的是下下周一和下下周日的日期
 * ...以此类推
 * @param i
 */
getNextWeek(i) {
  let weekOfDay = parseInt(moment().format('E'));//计算今天是这周第几天
  let next_monday = moment().add((7 - weekOfDay) + 7 * (i - 1) + 1, 'days').format('YYYY-MM-DD');//周一日期
  let next_sunday = moment().add((7 - weekOfDay) + 7 * i, 'days').format('YYYY-MM-DD');//周日日期
  return [next_monday, next_sunday]
}