让你事半功倍的JS utils工具函数3

简介: 让你事半功倍的JS utils工具函数

缓存相关

获取指定 Cookie 值

export const getCookie = (k) => {
  const res = RegExp('(^|; )' + encodeURIComponent(k) + '=([^;]*)').exec(document.cookie)
  return res && res[2]
}

设置 Cookie 值

export function setCookie(name, value, expriesDays, encode = false) {
  var Days = expriesDays || 10
  var exp = new Date()
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
  const val = encode ? escape(value) : value
  document.cookie = name + '=' + val + ';domain=zhuanzhuan.com;path=/;expires=' + exp.toUTCString()
}

简易版 Storage 操作,sessionStorage 及 localStorage 类似

const prefix = '_XXX_'
export function getStorage(key) {
  const content = sessionStorage.getItem(`${prefix}${key}`)
  if (content) {
    try {
      const params = JSON.parse(content)
      const expires = params.expires
      // 未设置过期 及 未过期
      if (!expires || (expires && Date.now() <= expires)) {
        return params.data
      }
    } catch (e) {
      console.log(e)
    }
  }
}
export function setStorage(key, data = {}, expires) {
  try {
    const params = { data }
    if (expires) {
      params.expires = expires
    }
    sessionStorage.setItem(`${prefix}${key}`, JSON.stringify(params))
  } catch (e) {
    console.log(e)
  }
}

数字相关

数字四舍五入,保留n位小数

export function round(number, n) {
    n = n ? parseInt(n) : 0
    if (n <= 0) return Math.round(number)
    number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n)
    return number
}

数字每千位加逗号

export function toThousands(num) {
  return num && num.toString()
    .replace(/\d+/, function(s){
         return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
     })
}

随机数

export function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

字符串相关

手机号码中间4位隐藏星号

export function hideMobile(mobile) {
  return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
}

检测密码强度 1:密码弱 2:密码中等 3:密码强 4:密码很强

export function checkPassWord(str) {
    let level = 0;
    if (str.length < 6) {
        return level
    };
    if (/[0-9]/.test(str)) {
        level++
    };
    if (/[a-z]/.test(str)) {
        level++
    };
    if (/[A-Z]/.test(str)) {
        level++
    };
    if(/\W/.test(str)){
        level++
    }
    return level
}

随机产生某个颜色

export function randomColor() {
  return `rgb(${this.random(0, 255)}, ${this.random(0, 255)}, ${this.random(0, 255)})`
}

字符串替换全部

export function replaceAll(s0, s1, s2){
  return s0.replace(new RegExp(s1, "gm"), s2);
}

版本号比较

传入两个版本号,格式如:4.3.2,返回结果,小于-1,等于0,大于1。

export function compareVersion(v1, v2) {
  var s1 = v1.split(".").map(v => parseInt(v));
  var s2 = v2.split(".").map(v => parseInt(v));
  var len1 = s1.length, len2 = s2.length, commonLen = Math.min(len1, len2);
  for (var i = 0; i < commonLen; ++i) {
    if (seq1[i] != seq2[i])
      return seq1[i]<seq2[i] ? -1 : 1;
  }
  return len1 === len2 ? 0 : (len1 < len2 ? -1 : 1);
}

对象转url字符串供导出接口(GET)使用

const objectToQueryString = (paramObj) => {
  const tmpArray = []
  // 特殊字符转义
  const filter = (str) => {
    str += '' // 隐式转换
    str = str.replace(/%/g, '%25')
    str = str.replace(/\+/g, '%2B')
    str = str.replace(/ /g, '%20')
    str = str.replace(/\//g, '%2F')
    str = str.replace(/\?/g, '%3F')
    str = str.replace(/&/g, '%26')
    str = str.replace(/\=/g, '%3D')
    str = str.replace(/#/g, '%23')
    return str
  }
  for (const attr in paramObj) {
    tmpArray.push(`${attr}=${filter(paramObj[attr])}`)
  }
  return tmpArray.join('&')
}

其他

函数防抖

export function debounce(fn, delay) {
  delay = delay || 1000;
  let timer = null;
  return function () {
    let context = this;
    let arg = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(context, arg);
    }, delay);
  };
}

节流函数

export function throttle(fn, delay = 300) {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        fn.apply(context, args);
        clearTimeout(timer);
      }, delay);
    }
  };
}

最后

除开本文所示的场景,也还有很多没有列举到的情况,如果你有认为很不错的工具函数,欢迎留言交流~


目录
相关文章
|
10天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
20 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
9天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
15天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
101 9
|
17天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
45 10
|
23天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
25天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
1月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
16 2
|
28天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
16 0
|
28天前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
25 4
JavaScript基础知识-函数的参数