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())

1. 数组自带的排序
2. 随机数

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. 深浅拷贝

1. 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;
};

参考资料

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

初心

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

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

共勉