常用js工具函数集合

这篇具有很好参考价值的文章主要介绍了常用js工具函数集合。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

日期

判断日期是否为今天

const isToday = (date) => date.toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10)

日期转换

当你需要将日期转换为为 YYYY-MM-DD 格式

const formatYmd = (date) => date.toISOString().slice(0, 10);
formatYmd(new Date())

秒数转换

当你需要将秒数转换为 hh:mm:ss 格式

const formatSeconds = (s) => new Date(s * 1000).toISOString().substr(11, 8)
formatSeconds(200) // 00:03:20

获取某年某月的第一天

当你需要获取某年某月的第一天

const getFirstDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth(), 1);
getFirstDate(new Date('2022-04')) // Fri Apr 01 2022 00:00:00 GMT+0800 (中国标准时间)

获取某年某月的最后一天

当你需要获取某年某月的最后一天

const getLastDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth() + 1, 0);
getLastDate(new Date('2023-03-04')) // Fri Mar 31 2023 00:00:00 GMT+0800 (中国标准时间)

获取某年月份天数

当你需要获取某年某个月份的总天数

const getDaysNum = (year, month) => new Date(year, month, 0).getDate()  
const day = getDaysNum(2024, 2) // 29

Web

滚动到页面顶部

如果你需要将页面翻到最顶部

const goToTop = () => window.scrollTo(0, 0);
goToTop()

文本粘贴

当你需要复制文本到粘贴板上

const copy = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text)
copy('你需要粘贴的文本')

正则表达式

常用

匹配邮箱,手机号,身份证,URL,日期,时间,数字,中文,英文单词,HTML标签

匹配邮箱地址:/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-zA-Z]{2,4}$/

匹配手机号码:/^1[3-9]\d{9}$/

匹配身份证号码:/^\d{17}[\dXx]|\d{15}$/

匹配 URL/^((http|https):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/

匹配日期格式(yyyy-mm-dd):/^\d{4}-\d{2}-\d{2}$/

匹配时间格式(hh:mm:ss):/^[0-9]{2}:[0-9]{2}:[0-9]{2}$/

匹配数字:/^\d+$/

匹配英文单词:/^[a-zA-Z]+$/

匹配中文字符:/[\u4e00-\u9fa5]/

匹配 HTML 标签:/<\/?[\w\s="/.':;#-\/]+>/g

数字格式化人民币

function formatRMB(num) {
  num = num.toString().replace(/\$|\,/g, '');
  if (isNaN(num)) num = "0";
  let sign = (num == (num = Math.abs(num)));
  num = Math.floor(num * 100 + 0.50000000001);
  let cents = num % 100;
  num = Math.floor(num / 100).toString();
  if (cents < 10) cents = "0" + cents;
  for (let i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
    num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
  }
  return "¥" + ((sign) ? '' : '-') + num + '.' + cents;
}

数组

打乱数组

当你有一个数组,你需要打乱这个数组的排序

const randomSort = list => list.sort(() => Math.random() - 0.5)
randomSort([0,1,2,3,4,5,6,7,8,9]) // 随机排列结果

多数组取交集

当你需要取多个数组中的交集

const intersection = (a, ...arr) => [...new Set(a)].filter((v) => arr.every((b) => b.includes(v)))

intersection([1, 2, 3, 4], [2, 3, 4, 7, 8], [1, 3, 4, 9])
// [3, 4]

查找最大值索引

但你需要找到一个数组中的最大值的索引

const indexOfMax = (arr) => arr.reduce((prev, curr, i, a) => (curr > a[prev] ? i : prev), 0);
indexOfMax([1, 3, 9, 7, 5]); // 2

数字

进制转换

将10进制转换成n进制,可以使用toString(n)

const toDecimal = (num, n = 10) => num.toString(n) 
// 假设数字10要转换成2进制
toDecimal(10, 2) // '1010'

将n进制转换成10进制,可以使用parseInt(num, n)

const toDecimalism = (num, n = 10) => parseInt(num, n)
toDecimalism(1010, 2)

补零

当你需要在一个数字num不足len位数的时候前面补零操作

const replenishZero = (num, len, zero = 0) => num.toString().padStart(len, zero)
replenishZero(8, 2) // 08

其他

uuid

const uuid = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid))
uuid()

获取cookie

当你需要将cookie转换成对象

const getCookie = () => document.cookie
    .split(';')
    .map((item) => item.split('='))
    .reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {})
getCookie()

休眠函数

当你需要等待一段时间,但又不想写在setTimeout函数中,造成回调地狱文章来源地址https://www.toymoban.com/news/detail-575369.html

const sleep = async (t) => new Promise((resolve) => setTimeout(resolve, t));
sleep(2000).then(() => {console.log('time')});

到了这里,关于常用js工具函数集合的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Day.js常用方法集合

    Day.js是一个轻量级的JavaScript日期库,具有简单易用、无依赖和体积小的特点。下面将介绍Day.js的优点和缺点。 目录 优点: 缺点: 接下来我们将详细介绍 Day.js 的使用方法,并附上代码示例和各种事件格式的转换。 安装与基本用法 然后,在你的代码中导入 Day.js: 使用 day

    2024年01月23日
    浏览(47)
  • Scala集合常用函数 - 初级计算函数

    水善利万物而不争,处众人之所恶,故几于道💦   1. 求和   2. 求乘积   3. 最大值   4. 最小值   5. 排序     sorted     sortBy()     sortWith() 以List集合为例: 1. 求和 2. 求乘积 3. 最大值 4. 最小值 5. 排序 1. sorted  对一个集合进行自然排序,通过传递隐式的

    2024年02月16日
    浏览(32)
  • Scala集合常用函数 - 高级计算函数

    水善利万物而不争,处众人之所恶,故几于道💦   1. 过滤 - filter   2. 转换/映射 - map   3. 扁平化 - flatten   4. 扁平化+映射 - flatMap   5. 分组 - groupBy   6. 简化(规约) - reduce   7. 折叠 - fold   8. 函数小练习 1. 过滤 - filter  遍历一个集合并从中获取满足指定

    2024年02月17日
    浏览(42)
  • 3分钟搞懂:JavaScript 和 ECMAScript

    ECMAScript 是 JavaScript 语言的 国际标准 ,JavaScript 是 ECMAScript 的 一种实现 (Adobe ActionScript 和 JScript 同样实现了 ECMAScript)。 ECMAScript 是欧洲计算机制造商协会 ECMA(European Computer Manufacturers Association)发布的浏览器脚本语言标准。它是 262 号标准文件,又叫 ECMA-262。 ECMAScript 定义

    2023年04月22日
    浏览(45)
  • 前端学习笔记:JavaScript基础语法(ECMAScript)

    此博客参考b站:【黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76vd_source=06e5549bf018e111f4275c259292d0da 这份笔记适用于已经学过一门编程语言(最好是C语言)的同学,如果你没有

    2024年02月16日
    浏览(46)
  • JavaScript高级二、构造函数&常用函数

    1、深入对象 (1)创建对象三种方式 利用对象字面量创建对象 利用 new Object 创建对象 利用构造函数创建对象 案例如下: (2)构造函数 **构造函数 :**是一种特殊的函数,主要用来 快速初始化 类似的 对象 构造函数语法 使用 new 调用函数的行为被称为 实例化 实例化

    2024年02月07日
    浏览(39)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(六)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月21日
    浏览(51)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(一)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月20日
    浏览(42)
  • 「Java」《Java集合框架详解:掌握常用集合类,提升开发效率》

    Java 集合框架是 Java 编程中不可或缺的一部分。它提供了一组强大的数据结构和算法,用于存储、操作和处理对象数据。本文将深入探讨 Java 集合框架的核心概念,介绍常用的集合接口和实现类,并提供实际应用示例,帮助读者更好地理解和应用集合框架,提升开发效率。

    2024年02月11日
    浏览(45)
  • JavaScript节流功能(js节流函数,节流功能的应用与解析,深入了解JavaScript节流函数)

    简述:上篇文章介绍了js防抖功能,这期说下js节流功能。节流就是某一高频事件不断被触发时,将多次执行变成每隔一段时间执行,具体点就是减少一个事件在一段时间内的触发频率,它是一种常用的函数优化技术,可以限制函数的执行频率,从而提高网页的性能和用户体验

    2024年02月13日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包