一些有趣的 js 功能函数

一些有趣的 js 功能函数

    • 数组
      • 生成数组
      • 打乱数组
      • 数组简单数据去重
      • 数组唯一值数据去重
      • 多数组取交集
      • 查找最大值索引
      • 查找最小值索引
      • 找到最接近的数值
      • 压缩多个数组(拉链函数)
      • 矩阵交换行和列
    • 数字转换
      • 进制转换
    • 正则
      • 手机号格式化
      • 去除多余空格
    • web
      • 重新加载当前页面
      • 滚动到页面顶部
      • 元素滚动
      • 检查当前是否IE浏览器
      • 从给定文本中剥离 html
      • 重定向
      • 文本粘贴
    • 日期
      • 判断日期是否为今天
      • 日期转换
      • 秒数转换
      • 获取某年某月的第一天
      • 获取某年某月的最后一天
      • 获取某年某月份天数
    • 函数
      • 异步函数判断
    • 数字
      • 截断数字
      • 四舍五入
      • 补零
    • 对象
      • 删除无效属性
      • 反转对象键值
      • 字符串转对象
    • 其他
      • 比较两个对象
      • 随机颜色生成
      • 颜色格式转换
      • 获取随机 ip
      • 当你需要生成一个 id
      • 获取cookie
      • 强制等待

数组

生成数组

当你需要要生成一个0-99的数组

  • 方案1
const createArr = (n) => Array.from(new Array(n), (v, i) => i)
const arr = createArr(100) // 0 - 99 数组
  • 方案2
const createArr = (n) => new Array(n).fill(0).map((v, i) => i)
createArr(100) // 0 - 99数组

打乱数组

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

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

数组简单数据去重

当你需要将数组中的所有重复的元素只保留一个

const removeDuplicates = list => [...new Set(list)]
removeDuplicates([0, 0, 2, 4, 5]) // [0,2,4,5]

数组唯一值数据去重

根据唯一值对数组进行去重

const duplicateById = list => [...list.reduce((prev, cur) => prev.set(cur.id, cur), new Map()).values()]
duplicateById([{id: 1, name: 'jack'}, {id: 2, name: 'rose'}, {id: 1, name: 'jack'}])
// [{id: 1, name: 'jack'}, {id: 2, name: 'rose'}]

多数组取交集

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

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

查找最小值索引

当你需要找到一个数组中的最小值的索引

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

找到最接近的数值

当你需要在一个数组中找到一个最接近的值

const closest = (arr, n) => arr.reduce((prev, curr) => (Math.abs(curr - n) < Math.abs(prev - n) ? curr : prev))
closest([29, 87, 8, 78, 97, 20, 75, 33, 24, 17], 50) // 33

压缩多个数组(拉链函数)

当你需要将多个数组压缩成一个数组

const zip = (...arr) => Array.from({ length: Math.max(...arr.map((a) => a.length)) }, (_, i) => arr.map((a) => a[i]))
zip([1,2,3,4], ['a', 'b', 'c', 'd'], ['A', 'B', 'C', 'D'])
// [[1, 'a', 'A'], [2, 'b', 'B'], [3, 'c', 'C'], [4, 'd', 'D']]

矩阵交换行和列

当你需要将一个矩阵的行和列进行互相交换

const transpose = (matrix) => matrix[0].map((col, i) => matrix.map((row) => row[i]));
transpose([              // [[1, 2, 3], //      [1, 4, 7],[4, 5, 6], //      [2, 5, 8],[7, 8, 9], //      [3, 6, 9],]             //  ]); 

数字转换

进制转换

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

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

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

// 10的2进制为1010
const toDecimalism = (num, n = 10) => parseInt(num, n)
toDecimalism(1010, 2)

正则

手机号格式化

当你需要将手机号码格式化成xxx-xxxx-xxxx的形式

const formatPhone = (str, sign = '-') => str.replace(/(\W|\s)/g, "").split(/^(\d{3})(\d{4})(\d{4})$/).filter(item => item).join(sign)formatPhone('13123456789') // '131-2345-6789'
formatPhone('13 1234 56 789', ' ') // '131 2345 6789'

去除多余空格

当你需要将一段文本中的多个空格合并成一个空格

const setTrimOut = str => str.replace(/\s\s+/g, ' ')
const str = setTrimOut('hello,   jack') // hello, jack

web

重新加载当前页面

const reload = () => location.reload();
reload()

滚动到页面顶部

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

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

元素滚动

如果你希望将一个元素顺滑的滚动到可视区域的起点

const scrollToTop = (element) => element.scrollIntoView({ behavior: "smooth", block: "start" })
scrollToTop(document.body)

如果你希望将一个元素顺滑的滚动到可视区域的终点

const scrollToBottom = (element) => element.scrollIntoView({ behavior: "smooth", block: "end" })
scrollToBottom(document.body)

检查当前是否IE浏览器

const isIE = !!document.documentMode;

从给定文本中剥离 html

当你需要在某个文本中将里面的标签全部过滤掉

const stripHtml = (html) => new DOMParser().parseFromString(html, 'text/html').body.textContent || '';
stripHtml('<div>test</div>') // 'test'

重定向

当你需要跳转到其他页面

const goTo = (url) => (location.href = url);

文本粘贴

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

const copy = (copyText) => {return navigator.clipboard?.writeText && navigator.clipboard.writeText(copyText).then(() => {return Promise.resolve()}).catch(() => {const input = document.createElement('input')document.body.appendChild(input)input.setAttribute('value', copyText)input.select()try {const result = document.execCommand('copy')document.body.removeChild(input)if (!result || result === 'unsuccessful') {return Promise.reject('复制失败')} else {return Promise.resolve()}} catch (e) {document.body.removeChild(input)return Promise.reject('当前浏览器不支持复制功能,请检查更新或更换其他浏览器操作')}})
}copy('你需要粘贴的文本')

日期

判断日期是否为今天

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 (中国标准时间)
getFirstDate(new Date('2022-04-05')).toLocaleDateString() // 2022/4/1

获取某年某月的最后一天

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

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 (中国标准时间)
getLastDate(new Date('2023-03-04')).toLocaleDateString() // 2023/3/31

获取某年某月份天数

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

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

函数

异步函数判断

判断一个函数是否属于异步函数

const isAsyncFunction = (v) => Object.prototype.toString.call(v) === '[object AsyncFunction]'
isAsyncFunction(async function () {}); // true

数字

截断数字

当你需要将小数点后的某些数字截断而不取四舍五入

const toFixed = (n, fixed) => `${n}`.match(new RegExp(`^-?\d+(?:.\d{0,${fixed}})?`))[0]
toFixed(10.255, 2) // 10.25

四舍五入

当你需要将小数点后的某些数字截断,并取四舍五入

const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
round(10.145, 2) // 10.1510.145.toFixed(2) // 10.14// Number.prototype.toPrecision方法以指定的精度返回该数值对象的字符串表示。
10.145.toPrecision(21) // '10.1449999999999995737'

补零

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

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

对象

删除无效属性

当你需要删除一个对象中的属性值为 null 或 undefined 的所有属性

const removeNullUndefined = (obj) => Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {});removeNullUndefined({name: '', age: undefined, sex: null}) // { name: '' }

反转对象键值

当你需要将对象的键值对交换

const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {})
invert({name: 'jack'}) // {jack: 'name'}

字符串转对象

当你需要将一串字符串比如’{name: “jack”}'转换成对象时,直接使用JSON.parse将会报错。

const strParse = (str) => JSON.parse(str.replace(/(\w+)\s*:/g, (_, p1) => `"${p1}":`).replace(/\'/g, "\""))strParse('{name: "jack"}')JSON.parse('{name: "jack"}') // 报错
JSON.parse('{"name": "jack"}') // 正常

其他

比较两个对象

当你需要比较两个对象,js的等于只能判断对象的地址是否相同,当地址不相同的时候无法判断两个对象的键值对是否一致。

const isEqual = (...objects) => objects.every(obj => JSON.stringify(obj) === JSON.stringify(objects[0]))
isEqual({name: 'jack'}, {name: 'jack'}) // true
isEqual({name: 'jack'}, {name: 'jack1'}, {name: 'jack'}) // false

随机颜色生成

当你需要获取一个随机颜色

const getRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
getRandomColor() // '#4c2fd7'

颜色格式转换

当你需要将16进制的颜色转换成rgb

const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`).substring(1).match(/.{2}/g).map((x) => parseInt(x, 16));
hexToRgb('#00ffff'); // [0, 255, 255]
hexToRgb('#0ff'); // [0, 255, 255]

获取随机 ip

当你需要生成一个ip地址

const randomIp = () =>Array(4).fill(0).map((_, i) => Math.floor(Math.random() * 255) + (i === 0 ? 1 : 0)).join('.');randomIp() // '18.133.38.119'
randomIp() // '96.152.111.16'

当你需要生成一个 id

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函数中,造成回调地狱

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/12282.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序之富文本那些事

文章目录 前言一、video的处理二、img的处理总结 前言 小程序中使用富文本编辑器&#xff0c;由于rich-text受限 部分富文本内容无法渲染或排版错乱。以img和video为例&#xff0c;处理起来让人头疼。网上各种长篇大论&#xff0c;实际上没有任何帮助。接下来我们就一起聊聊im…

聊聊STM32的基本定时器

STM32 的基本定时器&#xff08;Basic Timer&#xff09;是一种简单的定时器模块&#xff0c;用于生成基于时钟频率的定时中断。它可以用于实现各种定时和计时功能&#xff0c;例如延时、频率测量、PWM 生成等。 基本定时器通常由一个 16 位的自由运行计数器和一个预分频器组成…

Mac代码编辑器sublime text 4中文注册版下载

Sublime Text 4 for Mac简单实用功能强大&#xff0c;是程序员敲代码必备的代码编辑器&#xff0c;sublime text 4中文注册版支持多种编程语言&#xff0c;包括C、Java、Python、Ruby等&#xff0c;可以帮助程序员快速编写代码。Sublime Text的界面简洁、美观&#xff0c;支持多…

Bad owner or permissions on ~/.ssh/config

错误原因&#xff1a;设置本地所有文件的权限为741等。。。 在执行ssh免密码登录时报如下的错误&#xff1a;Bad owner or permissions on ~/.ssh/config。 解决方案&#xff1a; chmod 600 ~/.ssh/config

Linux-open、read、write函数

1、open函数 #include<stdio.h> #include<unistd.h> //close函数头文件#include<sys/types.h> //open函数头文件 #include<sys/stat.h> //open函数头文件 #include<fcntl.h> //flags参数头文件//返回值为对应文件的描述符&#xff0c;打开失败返…

Kendo UI,一个加速Web应用界面开发的JavaScript组件库!

Kendo UI是什么&#xff1f; 首先&#xff0c;Kendo UI是一个由四个JavaScript UI库组成的包&#xff0c;这些库是专为jQuery、Angular、React和Vue原生构建的&#xff0c;每一个都是用一致的API和主题构建的。所以无论开发者怎么选择&#xff0c;所开发的Web应用始终保持了现…

this关键字和同步异步宏认为微任务理解

目录 js面试常见问题&#xff1a;1.this指向 2.闭包定义和作用 3.原型链 4.异步协程 this关键字 this主要有以下几个使用场合。 1&#xff09;全局环境 &#xff08;2&#xff09;构造函数 &#xff08;3&#xff09;对象的方法 避免多层this 避免数组处理方法中的 this 避免回…

推荐几个Windows iso镜像下载的网站

文章目录 1. 微软官网2. MSDN网站3. 系统库(xitongku)4. 其他网站最后总结 给大家推荐几个 Windows iso镜像下载网站 1. 微软官网 入口地址&#xff1a;https://www.microsoft.com/zh-cn/software-download 以下载Windows11为例&#xff1a; 1&#xff09;找到下载Windows11…

undefined reference to `__android_log_print‘

报错描述 在 Android NDK 相关的工程构建中&#xff0c;出现报错&#xff1a; undefined reference to __android_log_print’ 翻译成 QM 能理解的话&#xff1a; 在链接阶段&#xff0c; 遇到一个需要被链接的符号 __android_log_print, 但是没有在给出的依赖库里面找到 __an…

【LeetCode】114.二叉树展开为链表

题目 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 1&…

day43-Spring_IOC

0目录 1.2.3 1. Spring_IOC 1.1 定义&#xff1a;轻量级框架&#xff0c;java EE的春天&#xff0c;主流框架 1.2 Spring特性&#xff1a;IOC控制反转&#xff1b;AOP面相切面 1.3 组成部分&#xff1a;Spring在SSM中所起到的作用&#xff08;SpringMVC和Mybatis框架的黏…

MySQL中GROUP_CONCAT()的介绍和用法

摘要&#xff1a;本文详细介绍MySQL数据库中GROUP_CONCAT()函数的概念和用法。通过示例和输出结果展示如何使用GROUP_CONCAT()函数将分组后的数据以字符串形式拼接起来&#xff0c;帮助读者更好地理解和应用这一功能。 1. 什么是GROUP_CONCAT() GROUP_CONCAT()是MySQL数据库提…

C程序设计:基于双向链表的flash磨损平衡算法

1.flash磨损平衡算法的重要性 Flash磨损平衡算法是一种用于管理和均衡闪存存储器中数据分布的算法。由于闪存存储器的特性&#xff0c;比如有限的擦写次数和块擦除的要求&#xff0c;长时间不进行数据的平衡处理可能会导致某些块的擦写次数明显超过其他块&#xff0c;造成闪存…

vue2企业级项目(五)

vue2企业级项目&#xff08;五&#xff09; 页面适配、主题切换 1、适配 项目下载插件 npm install --save-dev style-resources-loader vue-cli-plugin-style-resources-loader修改vue.config.js部分内容 const path require("path");module.exports {pluginOpt…

flutter 打包iOS安装包

flutter iOS Xcode打包并导出ipa文件安装包 1、 Xcode配置 1、 启动打包 1、 等待打包 1、 打包完成、准备导出ipa 1、 选择模式 1、 选择配置文件 1、 导出 1、 选择导出位置 1、 得到ipa

于大模型迁移中学习 Docker

最近在做大模型的昇腾迁移&#xff0c;国产化框架踩坑不少&#xff0c;基本一天的工作量相当于之前做纯视觉算法时一周踩过的坑数了。 现在在modelarts上用八卡昇腾910跑llama&#xff0c;不同于之前自己配环境&#xff0c;昇腾生态创新中心都是用的镜像&#xff0c;虽说打包起…

区分jdbcTemplate操作数据库和mybatis操作数据库

JdbcTemplate和MyBatis是Java中常用的两种数据库操作方式。它们在实现上有一些区别&#xff0c;下面我将为你介绍它们的主要特点和区别&#xff1a; JdbcTemplate&#xff1a; JdbcTemplate是Spring框架中提供的一个类&#xff0c;用于简化JDBC操作。使用JdbcTemplate时&#x…

【业务功能篇58】Springboot + Spring Security 权限管理 【下篇】

4.2.2.3 SpringSecurity工作流程分析 SpringSecurity的原理其实就是一个过滤器链&#xff0c;内部包含了提供各种功能的过滤器。这里我们可以看看入门案例中的过滤器。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KjoRRost-1690534711077)(http…

机器学习分布式框架ray tune笔记

Ray Tune作为Ray项目的一部分&#xff0c;它的设计目标是简化和自动化机器学习模型的超参数调优和分布式训练过程。Ray Tune简化了实验过程&#xff0c;使研究人员和数据科学家能够高效地搜索最佳超参数&#xff0c;以优化模型性能。 Ray Tune的主要特点包括&#xff1a; 超参…

数字信号处理中的基本运算——加法运算

1. 一位全加器 2. 二进制加法原理 两个N位二进制补码相加&#xff0c;为防止溢出时导致计算结果错误&#xff0c;可将这两个加数先进行符号位扩展&#xff0c;变为N1位二进制数&#xff0c;然后相加&#xff0c;结果亦取N1位&#xff0c;可保证运算结果正确。 根据多位加法器…