常见的功能函数

本文会不定时更新，有需要的随便拿走不谢

一、解析URL参数

解析URL参数在前端开发中是非常常见的功能

const _getParams = (url) => {
    // 补全代码
    const params=url.split('?')[1].split('&')
    const obj={}
    params.forEach(item=>{
        obj[item.split('=')[0]]=item.split('=')[1]
    })
    return obj
}

二、格式化时间函数

后端返回时间戳，前端显示年月日，时分秒

function formatDate (value) {
    if (typeof (value) == 'undefined') {
        return ''
    } else {
        let date = new Date(parseInt(value))
        let y = date.getFullYear()
        let MM = date.getMonth() + 1
        MM = MM < 10 ? ('0' + MM) : MM
        let d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        let h = date.getHours()
        h = h < 10 ? ('0' + h) : h
        let m = date.getMinutes()
        m = m < 10 ? ('0' + m) : m
        let s = date.getSeconds()
        s = s < 10 ? ('0' + s) : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    }
}

反向转换,将年月日，时分秒转换为时间戳

function formatDate() {
    var date = new Date('2020-04-07 18:08:58');
    // 有三种方式获取
    var time1 = date.getTime();
    var time2 = date.valueOf();
    var time3 = Date.parse(date);
}

三、防抖

// 函数防抖 (只执行最后一次点击)
const debounce = (fn: Function, delay = 300) => {
  let timer: NodeJS.Timeout | null;
  return function(...args: any) {
      timer && clearTimeout(timer);
      timer = setTimeout(() => {
          timer = null;
          fn.apply(this, args);
      }, delay);
  };
};

四、节流

// 节流（n秒内只下执行一次）
const throttle = (fn: any, delay = 500) => {
  let flag = false;
  return function(...args: any) {
      if (!flag) {
          flag = true;
          setTimeout(() => {
              console.log(flag);

              flag = false;
              // @ts-ignore
              fn.apply(this, args);
          }, delay);
      }
  };
}

五、关键字高亮

当用户在输入框搜索某个关键字后，将展示出来的联想列表中的关键字改变颜色，可以让用户更直观的看到想要的结果。

export const lightFn = (str, targetStr) => {
    // 忽略大小写且全局匹配
  const reg = new RegExp(targetStr, "ig")
  return str.replace(reg, match => {
    return `<span style="color:red">${match}</span>`
  })
}

六、数据类型检测

//检测变量的数据类型
export function getParamType(item) {
    if (item === null) return null;
    if (item === undefined) return undefined;
    return Object.prototype.toString.call(item).slice(8, -1);
}
//返回String, Function, Boolean, Object, Number

七、函数柯里化

    即把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术

const curring = fn => {
 const { length } = fn
 const curried = (...args) => {
 return (args.length >= length
 ? fn(...args)
 : (...args2) => curried(...args.concat(args2)))
 }
 return curried
 }

X、一行代码的实现方式

常用的JS方法 一行代码实现_银子先生的博客-CSDN博客_js 代码变成一行