常用JS工具函数

2023-11-02 59

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 常用JS工具函数

1. 前言

1.整理一下自己平常工作中用到的一些JS工具

2. 随机色

2.1 `rgb`的形式

当然也可以使用rgba

const randomColor = ()=> {
  var r = randomNumber(0, 255);
  var g = randomNumber(0, 255);
  var b = randomNumber(0, 255);
  return `rgb(${r},${g},${b})`;
}

2.2 十六进制颜色

颜色嘛英文穷举不合适 ,那就十六进制随机数

const randomColor = ()=>{
     return  "#" + Math.floor(Math.random()* 0xffffff).toString()
}

3. RGB转为 HEX

const rgbToHex = (r,g,b)=>{
         const toHex = num=>{
             const hex = num.toString(16)
             return hex.length === 1 ?  `0${hex}` :hex
         }
         return `#${toHex(r)}${toHex(g)}${toHex(b)}`
     }

4.日期格式化 -1

const formatNumber = n => {
    n = n.toString()
    return n[1] ? n : `0${n}`
}
const formatTime = date => {
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const second = date.getSeconds()
    return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}

根据自己的需求灵活变化就行

4.2 时间格式化 -2

export function formatDate (date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + ''
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
    }
  }
  return fmt
}
function padLeftZero (str) {
  return ('00' + str).substr(str.length)
}

4.3 时间格式化无符号拼接

export function nosignDateTime (date) {
  var datetime = transferDateTime(date)
  datetime = datetime.replace(/:/g, '').replace(/-/g, '').replace(/ /g, '')
  datetime = parseInt(datetime)
  return datetime
}

5. 返回最小日期

const getMinDate = dates => {
    if (!dates) {
        throw new Error('参数类型不匹配!')
    }
    if (!dates.length) {
        return dates
    }
    return new Date(Math.min.apply(null, dates)).toISOString()
}

参数是日期数组

6. 判断yyyy-MM-dd hh:mm:ss格式

正则表达式

export function validateDateTime (testdate) {
  var dateRegex = /((19|20)[0-9]{2})-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01]) ([01]?[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]/
  var res = dateRegex.test(testdate)
  if (res) {
    var ymd = testdate.match(/(\d{4})-(\d+)-(\d+).*/)
    var year = parseInt(ymd[1])
    var month = parseInt(ymd[2])
    var day = parseInt(ymd[3])
    if (day > 28) {
      // 获取当月的最后一天
      var lastDay = new Date(year, month, 0).getDate()
      return (lastDay >= day)
    }
    return true
  }
  return false
}

7. 比较时间大小

compareTime(beginTime, endTime) {
        var beginTimes = beginTime.replace(/-/g, "/");
        var endTimes = endTime.replace(/-/g, "/");
        var a = (Date.parse(endTimes) - Date.parse(beginTimes)) / 3600 / 1000;
        if (a < 0) {
            console.log("endTime小!");
        } else if (a > 0) {
            console.log("endTime大!");
        } else if (a == 0) {
            console.log("相等!");
        }
        return a;
    },

8.数字补0

const formatNumber = n => {
    n = n.toString()
    return n[1] ? n : `0${n}`
}

padStart

// '010'
"10".padStart(3,0)   
//'10a'
"10".padEnd(3,"a")

参数1: 字符串长度

参数2: 字符串长度不够用指定字符进行补充

padEnd 末尾补充

9.数组去重

const quChong = (arr)=>{
    return [...new Set(arr)]
  }

10. 数组打乱顺序

const disorderArr = array => {
    if (!Array.isArray(array)) {
        throw new Error('参数不匹配')
    }
    let end = array.length
    if (!end) {
        return array
    }
    while (end) {
        let start = Math.floor(Math.random() * end--)
        ;[array[start], array[end]] = [array[end], array[start]]
    }
    return array
}

参数:数组类型的数组

10.2 数组打乱顺序 -简洁

let arr = [32,6,4,'😄',true,'666',false,'2022年5月30号']
  arr = arr.sort(()=>0.5-Math.random())

数组自带的排序

随机数

11. 查找在数组中的位置

/**
     *
     * @param arr
     * @param str 查找在数组中的位置
     * @returns {number}
     */
 arrayIndexOf =(arr, str)=> {
        // 如果可以的话，调用原生方法
        if (arr && arr.indexOf) {
            return arr.indexOf(str);
        }
        var len = arr.length;
        for (var i = 0; i < len; i++) {
            // 定位该元素位置
            if (arr[i] == str) {
                return i;
            }
        }
        // 数组中不存在该元素
        return -1;
    }

12. 数组随机生产一个值

let arr = [32,6,4,'😄',true,'666',false,'2022年5月30号']
const randomElement = (arr)=>arr[Math.floor(Math.random()*arr.length)]
randomElement(arr)

13. 文件尺寸格式化

const formatSize = size => {
    if (typeof +size !== 'number') {
        throw new Error('参数不对 !')
    }
    const unitsHash = 'B,KB,MB,GB'.split(',')
    let index = 0
    while (size > 1024 && index < unitsHash.length) {
        size /= 1024
        index++
    }
    return Math.round(size * 100) / 100 + unitsHash[index]
}
formatSize('10240') // 10KB
formatSize('10240000') // 9.77MB

14.连字符转驼峰

const toCamelCase = (str = '', separator = '-') => {
    if (typeof str !== 'string') {
        throw new Error('参数类型不对')
    }
    if (str === '') {
        return str
    }
    const newExp = new RegExp('\\-\(\\w\)', 'g')
    return str.replace(newExp, (matched, $1) => {
        return $1.toUpperCase()
    })
}
toCamelCase('java-script')//javaScript'

15.驼峰转连字符

const fromCamelCase = (str = '', separator = '-') => {
    if (typeof str !== 'string') {
        throw new Error('参数类型不对')
    }
    if (str === '') {
        return str
    }
    return str.replace(/([A-Z])/g, `${separator}$1`).toLowerCase()
}
fromCamelCase('javaScript') // java-script

16. 深浅拷贝

js深浅拷贝

17. Unicode转中文

export function unicodeToChinese (str) {
  return unescape(str.replace(/&#x/g, '%u').replace(/;/g, ''))
}

18. 浏览器高度

const clientHeight = ()=> {
  return window.innerHeight || document.documentElement.clientHeight;
}

19.上滚动距离文档滚动的高度

const getScroTop = ()=> {
  return document.documentElement.scrollTop;
}

20. 元素距离顶部距离

const  getoffsetTop = ele=> {
  var top = 0;
  while (true) {
    top = top + ele.offsetTop + ele.offsetParent.clientTop;
    ele = ele.offsetParent;
    // ele是body 的时候 ,就到顶了
    if (ele.offsetParent == null) {
      break;
    }
  }
  return top;
}

21. 手机号中间四位变为*

也就是脱敏处理

let phone = "186929398753"
//186****8753
phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/ ,'$1****$2')

22. 校验数据类型

const typeOf = (obj)  =>{
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}
typeOf('yzs')  // string
typeOf([])  // array
typeOf(new Date())  // date
typeOf(null) // null
typeOf(true) // boolean
typeOf(() => { }) // function

23. 阿拉伯数字转中文数字

const numToChinese = (num) =>{
    if (!/^\d*(\.\d*)?$/.test(num)) {
        alert("Number is wrong!");
        return "Number is wrong!";
    }
    var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九");
    var BB = new Array("", "十", "百", "千", "万", "亿", "点", "");
    var a = ("" + num).replace(/(^0*)/g, "").split("."),
        k = 0,
        re = "";
    for (var i = a[0].length - 1; i >= 0; i--) {
        switch (k) {
            case 0:
                re = BB[7] + re;
                break;
            case 4:
                if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0]))
                    re = BB[4] + re;
                break;
            case 8:
                re = BB[5] + re;
                BB[7] = BB[5];
                k = 0;
                break;
        }
        if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0) re = AA[0] + re;
        if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re;
        k++;
    }
    if (a.length > 1) //加上小数部分(如果有小数部分) 
    {
        re += BB[6];
        for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)];
    }
    return re;
};

参考资料

部分代码是在网上搜索,根据我自己的开发需求进行了修改,但是时间久了也忘记在哪看的😭😭,如有侵权,请告知我会删除

常用JS工具函数

1. 前言

2. 随机色

2.1 `rgb`的形式

2.2 十六进制颜色

3. RGB转为 HEX

4.日期格式化 -1

4.2 时间格式化 -2

4.3 时间格式化无符号拼接

5. 返回最小日期

6. 判断yyyy-MM-dd hh:mm:ss格式

7. 比较时间大小

8.数字补0

padStart

9.数组去重

10. 数组打乱顺序

10.2 数组打乱顺序 -简洁

11. 查找在数组中的位置

12. 数组随机生产一个值

13. 文件尺寸格式化

14.连字符转驼峰

15.驼峰转连字符

16. 深浅拷贝

17. Unicode转中文

18. 浏览器高度

19.上滚动距离文档滚动的高度

20. 元素距离顶部距离

21. 手机号中间四位变为*

22. 校验数据类型

23. 阿拉伯数字转中文数字

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了`部落`的崛起;

共勉

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

常用JS工具函数

1. 前言

2. 随机色

2.1 rgb的形式

2.2 十六进制颜色

3. RGB转为 HEX

4.日期格式化 -1

4.2 时间格式化 -2

4.3 时间格式化无符号拼接

5. 返回最小日期

6. 判断yyyy-MM-dd hh:mm:ss格式

7. 比较时间大小

8.数字补0

padStart

9.数组去重

10. 数组打乱顺序

10.2 数组打乱顺序 -简洁

11. 查找在数组中的位置

12. 数组随机生产一个值

13. 文件尺寸格式化

14.连字符转驼峰

15.驼峰转连字符

16. 深浅拷贝

17. Unicode转中文

18. 浏览器高度

19.上滚动距离 文档滚动的高度

20. 元素距离顶部距离

21. 手机号中间四位 变为*

22. 校验数据类型

23. 阿拉伯数字转中文数字

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉

热门文章

最新文章

相关课程

相关电子书

相关实验场景

2.1 `rgb`的形式

19.上滚动距离文档滚动的高度

21. 手机号中间四位变为*

如果能帮助到有缘人,非常的荣幸,一切为了`部落`的崛起;