实用篇：JS工具函数，提高生产力的利器，助力高效开发（二）

于 2024-01-17 08:00:00 发布
阅读量353 收藏 9
点赞数 7
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39327418/article/details/135588928
版权

在这篇文章中，我们将探讨JavaScript中的工具函数。这些函数是用来解决日常开发中常见问题的实用代码。它们可以极大地提高开发效率和代码质量。

在JavaScript开发过程中，我们经常遇到一些通用的任务，比如处理数组、对象、日期、字符串等。如果每次遇到这些问题，我们都从头开始编写代码，那么开发效率会大大降低。工具函数就是用来解决这些常见问题的。它们提供了一种重用代码的方式，让我们能够更快地完成任务，同时保持代码的清晰和可维护。当然，我们我们也可以使用第三方库，比如lodash是一个非常流行的JavaScript工具库，它提供了许多实用的工具函数。

接上文《实用篇：JS工具函数，提高生产力的利器，助力高效开发（一）》，我们继续分享一些js工具函数。

17滚动到页面顶部

const scrollToTop = () => {
  const height = document.documentElement.scrollTop || document.body.scrollTop;
  if (height > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, height - height / 8);
  }
}

18滚动到页面底部

const scrollToBottom = () => {
  window.scrollTo(0, document.documentElement.clientHeight);  
}

19滚动到页面指定区域

const smoothScroll = (element) => {
  document.querySelector(element).scrollIntoView({
    behavior: 'smooth'
  });
};

20获取窗体可见宽和高

const getViewSize = () => {
  const de = document.documentElement;
  const db = document.body;
  const viewW = de.clientWidth == 0 ?  db.clientWidth : de.clientWidth;
  const viewH = de.clientHeight == 0 ?  db.clientHeight : de.clientHeight;
  return Array(viewW ,viewH);
}

21打开浏览器全屏

const toFullScreen = () => {
  let element = document.body;
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen()
  }
}

22退出浏览器全屏

const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  }
}

23键值对拼成URL参数

const params2Url = (obj) => {
   const params = []
   for (let key in obj) {
     params.push(`${key}=${obj[key]}`);
   }
   return encodeURIComponent(params.join('&'))
}

24阿拉伯数字转中文大写数字

const numberToChinese = (n) => {
    const CN = [
     {base: 0, cn: '零'}, 
     {base: 1, cn: '一'}, 
     {base: 1, cn: '二'}, 
     {base: 1, cn: '三'}, 
     {base: 1, cn: '四'}, 
     {base: 1, cn: '五'}, 
     {base: 1, cn: '六'}, 
     {base: 1, cn: '七'}, 
     {base: 1, cn: '八'}, 
     {base: 1, cn: '九'}, 
     {base: 10, cn: '十'}, 
     {base: 100, cn: '百'}, 
     {base: 1000, cn: '千'}, 
     {base: 10000, cn: '万'}, 
     {base: 100000000, cn: '亿'}, 
     {base: 10000000000000000, cn: '兆'}
    ]
    
    Number.prototype.toCN = function (i = CN.length - 1, emitLeadingOne = true) {
     // 小数部分处理：
     let deciPos = String(this).indexOf('.')
     if (deciPos >= 0) {
      let decimal = String(this).substring(deciPos + 1).replace(/\d/g, d => parseInt(d).toCN())
      return `${Math.floor(this).toCN()}点${decimal}`
     }
    
     // 整数部分处理：
     if (this < 10) {
      return CN[this].cn
     }
     let a = Math.floor(this / CN[i].base)
     let b = this % CN[i].base
     let c = b.toCN(i - 1, emitLeadingOne && a == 0)
     if (a > 0) {
      let d = a.toCN()
      if (emitLeadingOne && i == 10 && a == 1) {
       d = ''
      }
      if (b > 0) {
       if (String(CN[i].base).length - String(b).length > 1) {
        return d + CN[i].cn + CN[0].cn + c
       } else {
        return d + CN[i].cn + c
       }
      } else {
       return d + CN[i].cn
      }
     } else {
      return c
     }
    }
    return n.toCN()
   }
   console.log(numberToChinese(10635683.021))
   // 一千零六十三万五千六百八十三点零二一

25数字转中文大写金额

const changeToChinese = (n) => {
  let fraction = ['角', '分', '毫', '厘'];
  let digit = [
      '零', '壹', '贰', '叁', '肆',
      '伍', '陆', '柒', '捌', '玖'
  ];
  let unit = [
      ['元', '万', '亿'],
      ['', '拾', '佰', '仟']
  ];
  let head = n < 0 ? '欠' : '';
  n = Math.abs(n);
  let s = '';
  for (let i = 0; i < fraction.length; i++) {
      s += (digit[Math.floor(Math.floor(n * 1000 * 10 * Math.pow(10, i)) % (10 * 1000) / 1000)] + fraction[i])
          .replace(/零./, '')
  }
  s = s || '整';
  n = Math.floor(n)
  for (let i = 0; i < unit[0].length && n > 0; i++) {
      let p = '';
      for (let j = 0; j < unit[1].length && n > 0; j++) {
          p = digit[n % 10] + unit[1][j] + p
          n = Math.floor(n / 10)
      }
      s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
  }
  return head + s.replace(/(零.)*零元/, '元')
      .replace(/(零.)+/g, '零')
      .replace(/^整$/, '零元整')
}

changeToChinese(123456789.36)
// 壹亿贰仟叁佰肆拾伍万陆仟柒佰捌拾玖元叁角陆分

26去除空格

// type: 1-所有空格 2-前后空格 3-前空格 4-后空格
const trim = (str, type) => {
  type = type || 1
  switch (type) {
    case 1:
      return str.replace(/\s+/g, "");
    case 2:
      return str.replace(/(^\s*)|(\s*$)/g, "");
    case 3:
      return str.replace(/(^\s*)/g, "");
    case 4:
      return str.replace(/(\s*$)/g, "");
    default:
      return str;
  }
}

27获取浏览器URL中的参数

const getHrefParams = () => {
  const sHref = 'http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23';
  // const sHref = window.location.href ;
  const args = sHref.split('?');
  if (args[0] === sHref) {
    return "";
  }
  const arr = args[1].split('&');
  const obj = {};
  for (let i = 0; i < arr.length; i++) {
    const arg = arr[i].split('=');
    obj[arg[0]] = arg[1];
  }
  return obj;
}
const paramObj = getHrefParams(); // obj
paramObj['name']; // xiaoming

标题28格式化处理字符串

const formatText = (str, size, delimiter) => {
  const _size = size || 3, _delimiter = delimiter || ',';
  const regText = '\\B(?=(\\w{' + _size + '})+(?!\\w))';
  const reg = new RegExp(regText, 'g');
  return str.replace(reg, _delimiter);
}

formatText('1234asda567asd890')
// 12,34a,sda,567,asd,890
formatText('1234asda567asd890',4,' ')
// 1 234a sda5 67as d890
formatText('1234asda567asd890',4,'-')
// 1-234a-sda5-67as-d890

29获取文件拓展名

// (1).正则表达式
function getFileExtension1(filename) {
  return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined;
}

// (2).String的split方法
function getFileExtension2(filename) {
  return filename.split('.').pop();
}

// (3). String的slice、lastIndexOf方法
function getFileExtension3(filename){
  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2)
}

getFileExtension3("")//""
getFileExtension3("filename")//""
getFileExtension3("filename.txt")//txt
getFileExtension3(".hiddelfliname")//""

30密码强度检测

const checkPwd = (str) => {
  let Lv = 0;
  if (str.length < 6) {
      return Lv
  }
  if (/[0-9]/.test(str)) {
      Lv++
  }
  if (/[a-z]/.test(str)) {
      Lv++
  }
  if (/[A-Z]/.test(str)) {
      Lv++
  }
  if (/[\.|-|_]/.test(str)) {
      Lv++
  }
  return Lv;
}
console.log(checkPwd('Hy123_'))//4

31多维数组扁平化

const arr = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
   
// (1).使用concat()和apply()
const newArr = Array.prototype.concat.apply([], arr);
console.log(newArr)//[1, 2, 3, 4, 5, 6, 7, 8, 9]

// (2)使用reduce()
const newArr2 = arr.reduce((prev, curr) => {
    return prev.concat(curr);
})
console.log(newArr2)// [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 使用 ES6 的展开运算符
const newArr3 = [].concat(...arr);
console.log(newArr3)//[1, 2, 3, 4, 5, 6, 7, 8, 9]

31指定深度，多维数组扁平化

const flatten = (arr, depth = 1) =>
  arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), []);

flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]

32指定深度，多维数组扁平化

const endWith = (s) => {
  const d = this.length - s.length;
  return d >= 0 && this.lastIndexOf(s) == d;
};

33判断是否以某个字符结束

const endWith = (str, endStr) => {
  str = str.trim()
  let d = str.length - endStr.length;
  return d >= 0 && str.lastIndexOf(endStr) === d
}

34表单序列化

const serialize = data => {
  let list = [];
  Object.keys(data).forEach(ele => {
    list.push(`${ele}=${data[ele]}`)
  })
  return list.join('&')
}

35递归寻找子类的父类

const findParent = (menu, id) => {
  for (let i = 0; i < menu.length; i++) {
    if (menu[i].children.length != 0) {
      for (let j = 0; j < menu[i].children.length; j++) {
        if (menu[i].children[j].id == id) {
          return menu[i]
        } else {
          if (menu[i].children[j].children.length != 0) {
            return findParent(menu[i].children[j].children, id)
          }
        }
      }
    }
  }
}

36匹配8-16位数字和字母密码

const validatePwd = (pwd) => {
  const regName = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
  if (!regName.test(pwd)) return false
  return true
}

在JavaScript中，工具函数（也称为实用函数或辅助函数）是用来解决日常编程任务的函数。它们通常不是用于实现应用程序的主要功能，而是提供一些实用的功能，使开发人员的工作更加轻松。

本篇文章就先分享到这里，更多精彩内容，您可以本账号及时获取后续的最新文章内容！文中有错误的地方，欢迎大家批评指正，谢谢您的观看。

前端技术营
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值