JS工具函数

已于 2022-09-19 11:03:45 修改
阅读量146 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript vue.js 开发语言
于 2022-09-19 11:03:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanggongzichu/article/details/126927562
版权

梳理工具函数，助力高效研发。

目录

校验数据类型

大小写转换

RGB转换为十六进制

金额格式化

四舍五入到指定位数

数组对象根据字段去重

从数组中删除重复项

手机号脱敏

时间操作

生成随机字符串

生成随机字符串

从2个整数中获取一个随机整数

随机选择一种十六进制的颜色值

防抖、节流

判难手机是Andoird还是IOS

判断是否处于暗模式

开启全屏、关闭全屏

解析URL参数

滚动到页面顶部、滚动到元素位置

uuid

存储操作

下载文件

深拷贝

模糊检索

遍历树节点

  1. 校验数据类型

    1. export const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();

// 示例：
trueTypeOf(‘’); // string
trueTypeOf(0); // number
trueTypeOf(); // undefined
trueTypeOf(null); // null
trueTypeOf({}); // object
trueTypeOf([]); // array
trueTypeOf(0); // number
trueTypeOf(() => {}); // function

  2. 大小写转换

    1. /**
* str 待转换的字符串
* type 1-全大写 2-全小写 3-首字母大写
**/
export const turnCase = (str, type) => {
  switch (type) {
    case 1:
      return str.toUpperCase()
    case 2:
      return str.toLowerCase()
    case 3:
      //return str[0].toUpperCase() + str.substr(1).toLowerCase() // substr 已不推荐使用
      return str[0].toUpperCase() + str.substring(1).toLowerCase()
    default:
      return str
  }
}

// 示例
turnCase('vue', 1) // VUE
turnCase('REACT', 2) // react
turnCase('vue', 3) // Vue

  3. RGB转换为十六进制

    1. const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

//示例
rgbToHex(255, 255, 255);  // '#ffffff'

  4. 金额格式化

    1. /**
* {number} number：要格式化的数字
* {number} decimals：保留几位小数
* {string} dec_point：小数点符号
* {string} thousands_sep：千分位符号
**/
export const moneyFormat = (number, decimals, dec_point, thousands_sep) => {
  number = (number + '').replace(/[^0-9+-Ee.]/g, '')
  const n = !isFinite(+number) ? 0 : +number
  const prec = !isFinite(+decimals) ? 2 : Math.abs(decimals)
  const sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sep
  const dec = typeof dec_point === 'undefined' ? '.' : dec_point
  let s = ''
  const toFixedFix = function(n, prec) {
    const k = Math.pow(10, prec)
    return '' + Math.ceil(n * k) / k
  }
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
  const re = /(-?\d+)(\d{3})/
  while (re.test(s[0])) {
    s[0] = s[0].replace(re, '$1' + sep + '$2')
  }

  if ((s[1] || '').length < prec) {
    s[1] = s[1] || ''
    s[1] += new Array(prec - s[1].length + 1).join('0')
  }
  return s.join(dec)
}

// 示例：
moneyFormat(10000000) // 10,000,000.00
moneyFormat(10000000, 3, '.', '-') // 10-000-000.000

  5. 四舍五入到指定位数

    1. const round = (n, d) => Number(Math.round(n + “e” + d) + “e-” + d)

//示例
round(1.005, 2) //1.01
round(1.555, 2) //1.56

  6. 数组对象根据字段去重

    1. export const uniqueArrayObject = (arr = [], key = 'id') => {
  if (arr.length === 0) return
  let list = []
  const map = {}
  arr.forEach((item) => {
    if (!map[item[key]]) {
      map[item[key]] = item
    }
  })
  list = Object.values(map)

  return list
}

// 示例
const responseList = [
    { id: 1, name: '小哥' },
    { id: 2, name: '黄老爷' },
    { id: 3, name: '张麻子' },
    { id: 1, name: '黄老爷' },
    { id: 2, name: '张麻子' },
    { id: 3, name: '小哥' },
    { id: 1, name: '小哥' },
    { id: 2, name: '黄老爷' },
    { id: 3, name: '张麻子' },
]

uniqueArrayObject(responseList, 'id')
// [{ id: 1, name: '小哥' },{ id: 2, name: '黄老爷' },{ id: 3, name: '张麻子' }]

  7. 从数组中删除重复项

    1. //方法1：

const removeDuplicates = (arr) => [... .new Set(arr)];

console.log(removeDuplicates([1,2,2,2,5,66,666,55,5])); //[1,2,5,66,666,55]

  8. 手机号脱敏

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

  9. 时间操作

    1. 强烈推荐使用 day.js

  10. 生成随机字符串

    1. 生成随机字符串

      1. 
const randomString = () => Math.random().toString(36).slice(2);
//示例
randomString();

    2. 从2个整数中获取一个随机整数

      1. const random = (min, max) => Math.floor(Math.random() * (max — min + 1) + min);

// 示例：
random(1, 50);

    3. 随机选择一种十六进制的颜色值

      1. const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

// 示例：
randomHex();

  11. 防抖、节流

    1. // 防抖
export const debounce = (() => {
  let timer = null
  return (callback, wait = 800) => {
    timer&&clearTimeout(timer)
    timer = setTimeout(callback, wait)
  }
})();
// 示例：vue中使用
methods: {
  loadList() {
    debounce(() => {
      console.log('加载数据')
    }, 500)
  }
}


// 节流
export const throttle = (() => {
  let last = 0
  return (callback, wait = 800) => {
    let now = +new Date()
    if (now - last > wait) {
      callback()
      last = now
    }
  }
})();

  12. 判难手机是Andoird还是IOS

    1. /** 
 * 1: ios
 * 2: android
 * 3: 其它
 */
export const getOSType=() => {
  let u = navigator.userAgent, app = navigator.appVersion;
  let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isIOS) {
    return 1;
  }
  if (isAndroid) {
    return 2;
  }
  return 3;
}

  13. 判断是否处于暗模式

    1. const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)

  14. 开启全屏、关闭全屏

    1. // 开启全屏
export const launchFullscreen = (element) => {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen()
  }
}

// 关闭全屏
export const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  }
}

  15. 解析URL参数

    1. export const getSearchParams = () => {
  const searchPar = new URLSearchParams(window.location.search)
  const paramsObj = {}
  for (const [key, value] of searchPar.entries()) {
    paramsObj[key] = value
  }
  return paramsObj
}

// 示例
// 假设URL https://****com/index?id=154513&age=18;
getSearchParams(); // {id: "154513", age: "18"}

  16. 滚动到页面顶部、滚动到元素位置

    1. /**
* 滚动到页面顶部
**/
export const scrollToTop = () => {
  const height = document.documentElement.scrollTop || document.body.scrollTop;
  if (height > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, height - height / 8);
  }
}


/**
* 滚动到元素位置
**/
export const smoothScroll = element =>{
    document.querySelector(element).scrollIntoView({
        behavior: 'smooth'
    });
};
//示例
smoothScroll('#target'); // 平滑滚动到 ID 为 target 的元素



/**
* 判断页面是否在底部
**/

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

  17. uuid

    1. export const uuid = () => {
  const temp_url = URL.createObjectURL(new Blob())
  const uuid = temp_url.toString()
  URL.revokeObjectURL(temp_url) //释放这个url
  return uuid.substring(uuid.lastIndexOf('/') + 1)
}

// 示例
uuid() // a640be34-689f-4b98-be77-e3972f9bffdd

  18. 存储操作

    1. class MyCache {
  constructor(isLocal = true) {
    this.storage = isLocal ? localStorage : sessionStorage
  }

  setItem(key, value) {
    if (typeof (value) === 'object') value = JSON.stringify(value)
    this.storage.setItem(key, value)
  }

  getItem(key) {
    try {
      return JSON.parse(this.storage.getItem(key))
    } catch (err) {
      return this.storage.getItem(key)
    }
  }

  removeItem(key) {
    this.storage.removeItem(key)
  }

  clear() {
    this.storage.clear()
  }

  key(index) {
    return this.storage.key(index)
  }

  length() {
    return this.storage.length
  }
}

const localCache = new MyCache()
const sessionCache = new MyCache(false)

export { localCache, sessionCache }



// 示例
localCache.getItem('user')
sessionCache.setItem('name','树哥')
sessionCache.getItem('token')
localCache.clear()

  19. 下载文件

    1. /**
* api 接口
* params 请求参数
* fileName 文件名
**/
const downloadFile = (api, params, fileName, type = 'get') => {
  axios({
    method: type,
    url: api,
    responseType: 'blob', 
    params: params
  }).then((res) => {
    let str = res.headers['content-disposition']
    if (!res || !str) {
      return
    }
    let suffix = ''
    // 截取文件名和文件类型
    if (str.lastIndexOf('.')) {
      fileName ? '' : fileName = decodeURI(str.substring(str.indexOf('=') + 1, str.lastIndexOf('.')))
      suffix = str.substring(str.lastIndexOf('.'), str.length)
    }
    //  如果支持微软的文件下载方式(ie10+浏览器)
    if (window.navigator.msSaveBlob) {
      try {
        const blobObject = new Blob([res.data]);
        window.navigator.msSaveBlob(blobObject, fileName + suffix);
      } catch (e) {
        console.log(e);
      }
    } else {
      //  其他浏览器
      let url = window.URL.createObjectURL(res.data)
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName + suffix)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(link.href);
    }
  }).catch((err) => {
    console.log(err.message);
  })
}


// 示例
downloadFile('/api/download', {id}, '文件名');

  20. 深拷贝

    1. 想要完备的深拷贝，推荐使用 lodash 中的 cloneDeep 方法

  21. 模糊检索

    1. /**
* list 原数组
* keyWord 查询的关键词
* attribute 数组需要检索属性
**/
export const fuzzyQuery = (list, keyWord, attribute = 'name') => {
  const reg = new RegExp(keyWord)
  const arr = []
  for (let i = 0; i < list.length; i++) {
    if (reg.test(list[i][attribute])) {
      arr.push(list[i])
    }
  }
  return arr
}

// 示例：
const list = [
  { id: 1, name: '小哥' },
  { id: 2, name: '黄老爷' },
  { id: 3, name: '张麻子' },
  { id: 4, name: '汤师爷' },
  { id: 5, name: '胡万' },
  { id: 6, name: '花姐' },
  { id: 7, name: '小梅' }
]
fuzzyQuery(list, '哥', 'name') // [{id: 1, name: '小哥'}]

  22. 遍历树节点

    1. export const foreachTree = (data, callback, childrenName = 'children') => {
  for (let i = 0; i < data.length; i++) {
    callback(data[i])
    if (data[i][childrenName] && data[i][childrenName].length > 0) {
      foreachTree(data[i][childrenName], callback, childrenName)
    }
  }
}

// 示例：
const treeData = [{
  id: 1,
  label: '一级 1',
  children: [{
    id: 4,
    label: '二级 1-1',
    children: [{
      id: 9,
      label: '三级 1-1-1'
    }, {
      id: 10,
      label: '三级 1-1-2'
    }]
  }]
 }, {
  id: 2,
  label: '一级 2',
  children: [{
    id: 5,
    label: '二级 2-1'
  }, {
    id: 6,
    label: '二级 2-2'
  }]
  }, {
    id: 3,
    label: '一级 3',
    children: [{
      id: 7,
      label: '二级 3-1'
    }, {
      id: 8,
      label: '二级 3-2'
    }]
}],

let result
foreachTree(data, (item) => {
  if (item.id === 9) {
    result = item
  }
})
console.log('result', result)  // {id: 9,label: "三级 1-1-1"}

zhanggongzichu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端程序员项目里常用的utils.js工具函数
qq_45163356的博客
03-30 4031
前言：一般来说，放在utils里为全局的工具函数，包括时间，token，封装的网络请求 时间工具： 对于时间来说，我们有轻量的Moment.js 中文网 自己写： 先在data里定义timer: "", //定义一个定时器的变量 currentTime: "", // 获取当前时间 页面上就用{{currentTime}}展示 把下面这个函数放在created生命周期里面， getTime() { var _th...
节流工具函数封装
kingAn123的博客
08-14 1304
节流函数throttle用于解决频繁操作问题，限制一定时间内点击不触发事件 文章目录一、不同的实现方法1、定时器2、时间戳二、最优方法三、开始封装工具函数1、utils文件夹封装2、页面内调用四、局部变量问题五、回调函数无法传参问题1、尝试不传入整个函数,而是传入`func()`2、曲线救国,给工具函数传参数,而不是给回调函数传参数 一、不同的实现方法 1、定时器 缺点 首次也会被延...
JS工具函数库（持续更新）
跌碎寒夜
07-14 3020
//数组去重1 Array.prototype.removal = function () { var newArr = []; var obj = {}; for (var i = 0; i &lt; this.length; i++) { if (!obj[this[i]]) { obj[this[i]] = '...
lodash-es js工具函数
热门推荐
通俗易懂
04-29 1万+
文章目录为什么选择 Lodash安装和文档基本使用节流：throttle参数返回例子防抖：debounce参数返回例子浅拷贝：clone参数返回例子深拷贝：cloneDeep参数返回例子随机数：random参数返回例子判断是否是isNaN参数返回例子 lodash-es、lodash 都是封装js的工具函数，二者是一样的东西就是版本不同，推荐使用lodash-es 为什么选择 Lodash Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaSc
JavaScript前端实用的工具函数封装
不定时分享最优质的网络技术与教程，满满的干货。
12-10 1981
导入默认图片// // 注册自定义指令 v2方法// }//注册自定义指令 v3方法// 浏览器提供 IntersectionObserver// 图片加载失败就显示默认图片}// 不在监听dom}},{})// 监听dom}})}}
20 个 JS 工具函数助力高效开发
happy81997的博客
09-08 1151
Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库，下载、解析和执行的JavaScript更少，为代码留下更多的时间。此方法存在一定局限性：一些特殊情况没有处理: 例如Buffer对象、Promise、Set、Map。关于时间操作，没必要自己再写一大串代码了，强烈推荐使用 day.js[2]假设我们要从树状结构数据中查找 id 为 9 的节点。不过要吐槽一句的是，uuid一般应由后端来进行生成。{number} number：要格式化的数字。arr 要去重的数组。
axios源码——工具函数utils.js
娃哈哈_的博客
03-14 3583
文章目录前言一、工具函数所在目录二、判定数据类型的函数1.isArray(判定数组)2.isString(判定字符串)3.isNumber(判定数值)4.isObject(判定对象)5.isPlainObject(判定纯对象)6.isUndefined(判定是否是undefined)7.isFunction(判定是否是Function)8.isDate(判定是否是Date对象)9.isFile(判定是否是File文件对象)10.isBlob(判定是否是Blob对象)11.isBuffer(判定是否是Buff
jQuery 工具函数
xiangxiongfly
12-23 1124
字符串操作 $.trim() URL操作 $.param(） 数组操作 $.inArray() $.merge() $.makeArray() $.grep() $.each() 对象操作 $.each() 检测操作 $.isFunction() $.isArray() 原生JavaScript判断是否为数组 $.isEmptyObject() $.isPlainObject() $.contains() 自定义工具函数
JavaScript 工具函数（分享）
weixin_60547084的博客
05-13 518
【代码】JavaScript 工具函数（分享）
JS开发常用工具函数(小结)
10-16
在JavaScript（JS）开发中，工具函数是非常重要的一部分，它们帮助开发者简化常见任务，提高代码的可读性和可维护性。以下是一些常用的JS工具函数的详细解释： 1. `isStatic` 函数用于检测一个值是否为原始数据类型...
JavaScript常用工具函数库汇总
10-14
ction dateFormat(date, beforeHyphen = '-', afterHyphen = ':') { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart...
MyUtils:常用JavaScript工具函数
03-20
"MyUtils"是一个集大成者，它包含了众多在日常开发中可能会用到的JavaScript工具函数，旨在提供便利、高效的支持。本文将详细介绍MyUtils库中的主要功能和应用场景。 一、数组处理 MyUtils库中的数组处理功能强大，...
两个比较有用的Javascript工具函数代码
10-29
在JavaScript的日常开发中，我们经常会遇到需要...这两个工具函数对于提升JavaScript代码的复用性和易用性是非常有帮助的。在实际开发中，这样的工具函数应该被广泛使用，尤其是在那些需要频繁处理DOM和事件的场景中。
JavaScript常用工具函数大全
10-15
下面，我将详细介绍一些常见的JavaScript工具函数，并解释它们的用法和作用。 首先，为DOM元素添加事件监听是一个很常见的需求。在现代浏览器中，我们可以使用`addEventListener`方法来为元素添加事件监听器。但在...
vue ref和reactive区别
最新发布
灰海
08-25 353
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
2024前端面试题-js篇
FormAda的博客
08-22 877
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 374
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 374
【代码】【js】各类前端输入校验方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值