锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

JavaScript工具函数（一）

时间：2023-01-16 18:00:00 g108电容

JavaScript工具函数

    • 1.匹配正整数
    • 2.负整数匹配
    • 3.匹配整数
    • 4.匹配非负浮点数
    • 5.匹配由 26 由英文字母组成的字符串
    • 6.匹配由 26 由英文字母大写组成的字符串
    • 7.匹配由 26 由英文字母小写组成的字符串
    • 8.匹配电子邮件地址
    • 9.返回数组中最大值
    • 10.返回数组中的最小值
    • 11.将数组块划分为指定大小的较小数组
    • 12.从数组中移除 falsey 值
    • 13.计算数组中值的出现次数
    • 14.数组合数组
    • 15.返回两个数组之间的差异
    • 16.返回数组的所有不同值
    • 17.返回数组中的每个第 n 个元素
    • 18.筛选数组中的非唯一值
    • 20.拼合数组
    • 21.将数组向上拼合到指定深度
    • 22.根据给定函数对数组元素进行分组
    • 23.返回列表头
    • 24.返回除最后一个数组以外的所有元素
    • 25.初始化并填充具有指定值的数组
    • 26.初始化并填充具有指定值的数组
    • 27.返回两个数组中存在的元素列表
    • 28.返回数组中的最后一个元素
    • 29.使用函数将数组的值映射到对象， 键值由原始值和映射值组成
    • 30.nthElement: 返回数组第 n 个元素
    • 31.从对象中选择对应给定键的键值
    • 32.变异原始数组， 筛选指定值
    • 33.从数组中移除给定函数返回false的元素
    • 34.返回数组中的随机元素
    • 35.随机数组值的顺序
    • 36.返回两个数组中显示的元素的数组
    • 37.返回两个数组之间的对称差
    • 38.返回数组中的所有元素， 除第一个
    • 39.返回数组， 其中 n 从一开始就去除个元素
    • 40.返回一个数组, 其中 n 从末尾移除个元素
    • 41.返回两个数组中任何一个中存在的每个元素
    • 42.筛选数组中指定值之一的元素
    • 43.创建基于原始数组中位置分组的元素数组
    • 44.从给定数组中删除一个项目
    • 45.检查给定数组中是否包含某项
    • 46.验证不能包含字母
    • 47.验证中文和数字
    • 48.验证邮政编码(中国)
    • 49.验证微信号，6-20位，从字母开始，字母，数字，减号，下划线
    • 50.验证16进制颜色
    • 51.验证列车次数
    • 52.验证手机身码(IMEI)
    • 53.验证必须有端口号的网站(或ip)
    • 54.验证网站(支持端口和"? 参数"和"# 参数)
    • 55.验证统一的社会信用代码
    • 56.验证快雷链接
    • 57.验证ed2k链接(宽松匹配)
    • 58.验证磁链接(宽松匹配)
    • 59.验证子网掩码
    • 60.验证linux"文件夹"路径
    • 61.验证linux"文件"路径
    • 62.验证window"文件夹"路径
    • 63.验证window下"文件"路径
    • 64.验证股票代码(A股)
    • 65.验证版本号格式必须是X.Y.Z
    • 66.验证视频链接地址(视频格式可按需增删)
    • 67.验证图片链接地址(图片格式可按需增删)
    • 68.验证银行卡号（10到30位, 覆盖公私账户， 参考微信支付)
    • 69.验证中文名称
    • 70.验证英文名称
    • 71.验证车牌号(新能源)
    • 72.验证车牌号(非新能源)
    • 73.验证车牌号(新能源) 非新能源)
    • 74.验证中国手机号(严谨)， 根据工信部2019年最新发布的手机号段
    • 75.验证中国手机号(宽松)， 从13、14、15、16、17、18、19开始
    • 76.验证email(邮箱)
    • 77.验证座机电话(国内)，如: 0341-86091234
    • 78.验证身份证号码(1代，15位数字)
    • 79.验证身份证号码(2代，18位)，最后一位是验证位，可能是数字或字符X
    • 80.验证身份证号， 支持1/2代(15位/18位数字)
    • 81.验证护照(包括香港和澳门)
    • 82.验证账号是否合法(字母开头，允许5-16字节，允许字母数字下划线组合
    • 83.验证中文/汉字
    • 84.验证小数
    • 85.验证数字
    • 86.验证qq号格式
    • 87.验证数字和字母的组成
    • 88.验证英文字母
    • 89.验证大写英文字母
    • 90.验证小写英文字母
    • 91.返回当前url
    • 92.获取url参数(第一种)
    • 93.获取url参数(第二种)
    • 94.修改url中的参数
    • 95.删除url中指定的参数
    • 96.获取窗口可视范围的高度
    • 97.获取窗口可视宽度
    • 98.获取窗宽
    • 99.获取窗口尺寸
    • 100.获取滚动条距顶部高度
    • 101.获得滚动条距左侧的高度
    • 102.开启全屏
    • 103.关闭全屏
    • 104.返回当前滚动条的位置
    • 105.滚动到指定元素区域
    • 106.平滑滚动到页面顶部
    • 107.http跳转https
    • 108.检查页面底部是否可见
    • 109.打开窗户
    • 110.自适应页面（rem）
    • 日期工具date工具函数
    • 111.浏览器存储storage工具函数
    • 112.localStorage 存贮
    • 113.localStorage 获取
    • 114.localStorage 移除
    • 115.localStorage 存储一段时间失效
    • 116.sessionStorage 存贮
    • 117.sessionStorage 获取
    • 118.sessionStorage 删除
    • 119.sessionStorage 存储一段时间失效
    • 120.cookie 存贮
    • 121.cookie 获取
    • 122.cookie 删除
    • 123.更多的工具函数
    • 124.钱格式化，三个加逗号
    • 125.截取字符串并添加略号
    • 126.获取文件base64编码
    • 127.B转换到KB,MB,GB并保留两位小数
    • 128.base64转file
    • 129.base64转blob
    • 130.blob转file
    • 131.file转base64
    • 132.递归生成树形结构
    • 133.遍历树节点
    • 134.追溯父节点
    • 135.寻找所有子节点
    • 136.根据pid形成树形结构
    • 137.查询数组中是否存在某一元素并返回元素的第一次下标
    • 138.Windows根据详细版本号判断当前系统名称
    • 判断手机是Andoird还是IOS
    • 140.函数防抖
    • 145.函数节流
    • 146.判断数据类型
    • 147.生成指定范围随机数
    • 148.数组乱序
    • 150.数组交集
    • 151.数组中某元素出现的次数
    • 152.加法函数（精度丢失问题）
    • 153.减法函数（精度丢失问题）
    • 154.除法函数（精度丢失问题）
    • 155.乘法函数（精度丢失问题）
    • 156.递归优化（尾递归）
    • 157.生成随机整数
    • 158.去除空格
    • 159.大小写转换
    • 160.随机16进制颜色 hexColor
    • 161.随机16进制颜色 randomHexColorCode
    • 162.转义html(防XSS攻击)
    • 163.检测移动/PC设备
    • 165.返回指定元素的生效样式
    • 166.检查是否包含子元素
    • 167.数字超过规定大小加上加号“+”，如数字超过99显示99+
    • 168.如何隐藏所有指定的元素
    • 169.如何检查元素是否具有指定的类？
    • 170.如何切换一个元素的类?
    • 171.如何获取当前页面的滚动位置？
    • 172.如何平滑滚动到页面顶部
    • 173.如何检查父元素是否包含子元素？
    • 174.如何检查指定的元素在视口中是否可见？
    • 175.如何获取元素中的所有图像？
    • 176.如何确定设备是移动设备还是台式机/笔记本电脑？
    • 177.How to get the current URL?
    • 178.如何创建一个包含当前URL参数的对象？
    • 179.如何将一组表单元素转化为对象？
    • 180.如何从对象检索给定选择器指示的一组属性？
    • 181.如何在等待指定时间后调用提供的函数？
    • 182.如何在给定元素上触发特定事件且能选择地传递自定义数据？
    • 183.如何从元素中移除事件监听器?
    • 184.如何获得给定毫秒数的可读格式？
    • 185.如何获得两个日期之间的差异（以天为单位）？
    • 186.如何向传递的URL发出GET请求？
    • 187.如何对传递的URL发出POST请求？
    • 188.如何为指定选择器创建具有指定范围，步长和持续时间的计数器？
    • 189.如何将字符串复制到剪贴板？
    • 190.如何确定页面的浏览器选项卡是否聚焦？
    • 191.如何创建目录（如果不存在）？
    • 192.日期型函数封装
    • 193.时间戳转时间
    • 194.js中获取上下文路径
    • 195.JS大小转化B KB MB GB的转化方法
    • 196.js全屏和退出全屏
    • 197.格式化时间，转化为几分钟前，几秒钟前
    • 198 获取n天之前的日期 getDaysBeforeDate(10) 10天前
    • 199.获取跳转的classId,通过hash方式获取
    • 200.过滤器指定字段
    • 201.根据身份证获取出生年月
    • 202.根据身份证获取年龄
    • vue购物车金额结算
    • 设置iframe高度
    • 回到顶部
    • urlAnalysis
    • 监听enter按下事件，页面跳转
    • showDate
    • 获取跳转的classId,通过hash方式获取
    • 203.原生js滑块验证
    • 204.纯 js无限加载瀑布（原创）
    • 205.jQuery两个元素比较高度
    • 206.js定时清除缓存，存储缓存，获取缓存
    • 207.数组降维
    • 208.设置cookie,获取cookie,删除cookie
    • 209.判读是否为外链
    • 210.校验密码是否小于6位
    • 211.判断是否为数字
    • 212.判断是否是名称
    • 213.判断是否为IP
    • 214.判断是否是传统网站
    • 215.判断是否是小写字母
    • 216.判断是否是大写字母
    • 217.判断是否是大写字母开头
    • 218.判断是否是字符串
    • 219.判断是否是数组
    • 220.判断是否是端口号
    • 221.判断是否是手机号
    • 222.判断是否是身份证号(第二代)
    • 223.判断是否是邮箱
    • 224.判断是否中文
    • 225.判断是否为空
    • 226.判断是否为固话
    • 227.判断是否为数字且最多两位小数
    • 228.判断经度 -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
    • 229.判断纬度 -90.0～+90.0（整数部分为0～90，必须输入1到5位小数）
    • 230.rtsp校验只要有rtsp://
    • 231.判断IE浏览器版本和检测是否为非IE浏览器
    • 232.数组去重
      • 方案一：`Set + …`
      • 方案二：`Set + Array.from`
      • 方案三：双重遍历比对下标
      • 方案四：单遍历 + Object 特性
    • 233.查找数组最大
      • 方案一：`Math.max + …`
      • 方案二：`Math.max + apply`
      • 方案三：`Math.max` + 遍历
      • 方案四：比较、条件运算法 + 遍历
      • 方案五：排序
    • 234.查找数组最小
    • 237.返回两个数组中相同的元素
      • 方案一：filter + includes
      • 方案二：同理变种用 hash
    • 238.从右删除 n 个元素
      • 方案一：slice
      • 方案二: splice
      • 方案三: slice 另一种
      • 方案四: 修改 length
    • 239.截取第一个符合条件的元素及其以后的元素
      • 方案一：slice + 循环
      • 方案二：findIndex + slice
      • 方案三：splice + 循环
    • 240.返回数组中下标间隔 nth 的元素
      • 方案一：filter
      • 方案二：方案一修改判断条件
    • 241.返回数组中第 n 个元素（支持负数）
      • 方案一：slice
      • 方案二：三目运算符
    • 242.返回数组头元素
      • 方案一：
      • 方案二：
    • 243.返回数组末尾元素
      • 方案一：
      • 方案二：
    • 245.数组乱排
      • 方案一：洗牌算法
      • 方案二：sort + random
    • 246.伪数组转换为数组
      • 方案一：Array.from
      • 方案二：prototype.slice
      • 方案三：prototype.splice
    • 195.判读浏览器是否支持 CSS 属性
    • 247.返回当前网页地址
      • 方案一：location
      • 方案二：a 标签
    • 获取滚动条位置
    • 248.获取 url 中的参数
      • 方案一：正则 + reduce
      • 方案二：split + reduce
      • 方案三: URLSearchParams
    • 249.页面跳转，是否记录在 history 中
      • 方案一：
      • 方案二：
    • 250.滚动条回到顶部动画
      • 方案一： c - c / 8
    • 251.复制文本
      • 方案一：
      • 方案二：cliboard.js
    • 252.检测设备类型
      • 方案一： ua
      • 方案二：事件属性
    • 253.Cookie
      • 增
      • 删
      • 查
      • 清空
    • 254.时间戳转换为时间
    • 获取当前时间戳
      • 方案一：Date.parse(new Date())
      • 方案二：Date.now()
      • 方案三：+new Date()
    • 255固定滚动条
    • 256 判断当前位置是否为页面底部
    • 257判断元素是否在可视范围内
    • 258.获取元素 css 样式
    • 259.进入全屏
    • 260退出全屏
    • 261全屏事件
    • 262.数字千分位分割
    • 263.生成随机数
    • 264 时间戳转时间
    • 265 过滤富文本和空格为纯文本
    • 266 指定显示的文字数量多余的使用省略号代替
    • 267 获取滚动条当前的位置
    • 268 获取当前可视范围的高度
    • 269 获取文档完整的高度
    • 1.邮箱
    • 2.手机号码
    • 3.电话号码
    • 4.是否url地址
    • 5.是否字符串
    • 6.是否数字
    • 7.是否boolean
    • 8.是否函数
    • 9.是否为null
    • 10.是否undefined
    • 11.是否对象
    • 12.是否数组
    • 13.是否时间
    • 14.是否正则
    • 15.是否错误对象
    • 16.是否Symbol函数
    • 17.是否Promise对象
    • 18.是否Set对象
    • 19.是否是微信浏览器
    • 20.是否是移动端
    • 21.是否是QQ浏览器
    • 22.是否是爬虫
    • 23.是否ios
    • 24.是否为PC端
    • 25.去除html标签
    • 26.获取url参数
    • 27.动态引入js
    • 28.根据url地址下载
    • 29.el是否包含某个class
    • 30.el添加某个class
    • 31.el去除某个class
    • 32.获取滚动的坐标
    • 33.滚动到顶部
    • 34.el是否在视口范围内
    • 35.洗牌算法随机
    • 36.拦截粘贴板
    • 37.判断类型集合
    • 38.严格的身份证校验
    • 39.随机数范围
    • 40.将阿拉伯数字翻译成中文的大写数字
    • 41.将数字转换为大写金额
    • 42.判断一个元素是否在数组中
    • 43.数组排序，{type} 1：从小到大 2：从大到小 3：随机
    • 44.去重
    • 45.求两个集合的并集
    • 46.求两个集合的交集
    • 47.删除其中一个元素
    • 48.将类数组转换为数组
    • 49.最大值
    • 50.最小值
    • 51.求和
    • 52.平均值
    • 53.去除空格,type: 1-所有空格 2-前后空格 3-前空格 4-后空格
    • 54.字符转换，type: 1:首字母大写 2：首字母小写 3：大小写转换 4：全部大写 5：全部小写
    • 55.检测密码强度
    • 56.函数节流器
    • 57.在字符串中插入新字符串
    • 58.判断两个对象是否键值相同
    • 59.16进制颜色转RGBRGBA字符串
    • 60.追加url参数

1.匹配正整数

// 匹配正整数
let isPositiveNum = val => { 
        
    return /^[1-9]d*$/.test(val);
};
console.log(isPositiveNum(9)) //true
console.log(isPositiveNum(2.2)) //false

2.匹配负整数

// 匹配负整数
 let isNegativeNum = val => { 
        
     return /^-[1-9]d*$/.test(val);
 };
 console.log(isNegativeNum(-9)) //true
 console.log(isNegativeNum(2.2)) //false

3.匹配整数

// 匹配整数
let isInteger = val => { 
        
    return /^(-|\+)?\d+$/.test(val);
};
console.log(isInteger(-9)) //true
console.log(isInteger(2.2)) //false

4.匹配非负浮点数

// 匹配非负浮点数
let isNotNegativeFloatNum = val => { 
        
    return /^\d+(\.\d+)?$/.test(val);
};
console.log(isNotNegativeFloatNum(-9)) //false
console.log(isNotNegativeFloatNum(2.2)) //true

5.匹配由 26 个英文字母组成的字符串

//匹配由 26 个英文字母组成的字符串
let isAZaz = val => { 
        
    return /^[A-Za-z]+$/.test(val);
};
console.log(isAZaz('122a')) //false
console.log(isAZaz('abc')) //true

6.匹配由 26 个英文字母的大写组成的字符串

//匹配由 26 个英文字母的大写组成的字符串
let isAZ = val => { 
        
    return /^[A-Z]+$/.test(val);
};
console.log(isAZ('Acs')) //false
console.log(isAZ('ABC')) //true

7.匹配由 26 个英文字母的小写组成的字符串

//匹配由 26 个英文字母的小写组成的字符串
let isaz = val => { 
        
    return /^[a-z]+$/.test(val);
};
console.log(isaz('Acs')) //false
console.log(isaz('abc')) //true

8.匹配电子邮件地址

// 匹配电子邮件地址
let isEmailAddress = val => { 
        
    return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(val) || /w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*/.test(val);
};
console.log(isEmailAddress('Acs')) //false
console.log(isEmailAddress('133@qq.com')) //true

9.返回数组中的最大值

// arrayMax: 返回数组中的最大值
// 将Math.max()与扩展运算符 (...) 结合使用以获取数组中的最大值。
let arrayMax = arr => Math.max(...arr);
let arr = [1,2,3,5];
console.log(arrayMax(arr)) //5

10.返回数组中的最小值

// arrayMin: 返回数组中的最小值
// 将Math.min()与扩展运算符 (...) 结合使用以获取数组中的最小值。
let arrayMin = arr => Math.min(...arr);
let arr = [1, 2, 3, 5];
console.log(arrayMin(arr)) //1

11.将数组块划分为指定大小的较小数组

// chunk: 将数组块划分为指定大小的较小数组。
// 使用Array.from()创建新的数组, 这符合将生成的区块数。使用Array.slice()将新数组的每个元素映射到size长度的区块。如果原始数组不能均匀拆分, 则最终的块将包含剩余的元素。
let chunk = (arr, size) => Array.from({ 
        
    length: Math.ceil(arr.length / size)
}, (v, i) => arr.slice(i * size, i * size + size));
let arr = [1, 2, 3, 5];
console.log(chunk(arr,2)) //0: Array [ 1, 2 ],1: Array [ 3, 5 ],

12.从数组中移除 falsey 值

// compact: 从数组中移除 falsey 值。
// 使用Array.filter()筛选出 falsey 值 (false、null、0、""、undefined和NaN).
let compact = arr => arr.filter(Boolean);
let arr = [false,null,0,"",undefined,NaN,1]
console.log(compact(arr)) //[ 1 ]

13.计算数组中值的出现次数

// countOccurrences: 计算数组中值的出现次数
// 使用Array.reduce()在每次遇到数组中的特定值时递增计数器。
let countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
let arr = [1,2,1,2,3,3,3,3];
console.log(countOccurrences(arr,3))//4

14.深拼合数组

// deepFlatten: 深拼合数组
// 使用递归。使用Array.concat()与空数组 ([]) 和跨页运算符 (...) 来拼合数组。递归拼合作为数组的每个元素。
let deepFlatten= arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v));
let arr = [1, 2, [1, 2, [1, 2, [2, 3]]]];
console.log(deepFlatten(arr)) // [ 1, 2, 1, 2, 1, 2, 2, 3 ]

15.返回两个数组之间的差异

// difference: 返回两个数组之间的差异
// 从b创建Set, 然后使用Array.filter() on 只保留a b中不包含的值.
let difference = (a, b) => { 
        
    const s = new Set(b);
    return a.filter(x => !s.has(x));
};
let arr = [1,2,3];
let arr2 = [2,3,4];
console.log(difference(arr,arr2))//[1]
console.log(difference(arr2,arr))//[4]

16.返回数组的所有不同值

// distinctValuesOfArray: 返回数组的所有不同值
// 使用 ES6 Set和...rest运算符放弃所有重复的值。
let distinctValuesOfArray = arr => [...new Set(arr)];
let arr = [1, 2, 3, 1, 2];
console.log(distinctValuesOfArray(arr)) // [ 1, 2, 3 ]

17.返回数组中的每个第 n 个元素

// everyNth: 返回数组中的每个第 n 个元素
// 使用Array.filter()创建一个包含给定数组的每个第 n 个元素的新数组。
let everyNth = (arr, nth) => arr.filter((e, i) => i % nth === 0);

18.筛选出数组中的非唯一值

// filterNonUnique：筛选出数组中的非唯一值
// 对于只包含唯一值的数组, 请使用Array.filter()。
let filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

20.拼合数组

// flatten: 拼合数组
// 使用Array.reduce()获取数组中的所有元素和concat()以拼合它们
let flatten = arr => arr.reduce((a, v) => a.concat(v), []);

21.将数组向上拼合到指定深度

// falttenDepth: 将数组向上拼合到指定深度
// 使用递归, 递减depth, 每层深度为1。使用Array.reduce()和Array.concat()来合并元素或数组。基本情况下, 对于等于1的depth停止递归。省略第二个元素,depth仅拼合到1的深度 (单个拼合)。
// falttenDepth: (arr, depth = 1) => depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flattenDepth(v, depth - 1) : v), []) : arr.reduce((a, v) => a.concat(v), []),

22.根据给定函数对数组元素进行分组

// groupby: 根据给定函数对数组元素进行分组
// 使用Array.map()将数组的值映射到函数或属性名。使用Array.reduce()创建一个对象, 其中的键是从映射的结果生成的。
// groupBy: (arr, func) => arr.map(typeof func === 'function' ? func : val => val[func]).reduce((acc, val, i) => { acc[val] = (acc[val] || []).concat(arr[i]); return acc; }, {}),

23.返回列表的头

// head: 返回列表的头
// 使用arr[0]可返回传递的数组的第一个元素。
let head = arr => arr[0];

24.返回除最后一个数组之外的所有元素

// initial: 返回除最后一个数组之外的所有元素
// 使用 "arr.slice(0,-1)" 返回数组的最后一个元素。
let initial = arr => arr.slice(0, -1);

25.初始化并填充具有指定值的数组

// initializeArrayWithRange: 初始化并填充具有指定值的数组
// 使用Array(n)创建所需长度的数组,fill(v)以填充所需的值。可以省略value以使用默认值0.
let initializeArrayWithRange = (end, start = 0) => Array.from({ 
        
    length: end - start
}).map((v, i) => i + start);

26.初始化并填充具有指定值的数组

// initializeArrayWithValues: 初始化并填充具有指定值的数组
// 使用Array(n)创建所需长度的数组,fill(v)以填充所需的值。可以省略value以使用默认值0
let initializeArrayWithValues = (n, value = 0) => Array(n).fill(value);

27.返回两个数组中存在的元素的列表

// intersection: 返回两个数组中存在的元素的列表
// 从b创建Set, 然后使用Array.filter()on a只保留b中包含的值.
let intersection = (a, b)

相关文章