funciones comunes

Este artículo se actualizará de vez en cuando, quítelo si lo necesita.

1. Análisis de parámetros de URL

El análisis de parámetros de URL es una función muy común en el desarrollo front-end

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

2. Función de formato de tiempo

El backend devuelve la marca de tiempo y el frontend muestra el año, mes, día, hora, minuto y segundo.

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
    }
}

Conversión inversa, convertir año, mes, día, hora, minuto y segundo a marca de tiempo

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);
}

3. Antivibración

// 函数防抖 (只执行最后一次点击)
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);
  };
};

Cuatro, estrangulando

// 节流（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);
      }
  };
}

5. Resaltado de palabras clave

Cuando el usuario busca una palabra clave en el cuadro de entrada, las palabras clave en la lista de asociación mostrada cambiarán de color para que el usuario pueda ver el resultado deseado de manera más intuitiva.

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

6. Detección de tipo de datos

//检测变量的数据类型
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

7. Función de curry

    Es decir, una tecnología que transforma una función que acepta múltiples parámetros en una función que acepta un solo parámetro (el primer parámetro de la función original), y devuelve una nueva función que acepta los parámetros restantes y devuelve el resultado.

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

X, la implementación de una línea de código

Implementación de código de una línea de métodos JS de uso común