让你瞬间提高工作效率的常用js函数汇总(持续更新)

徐小夕
• 阅读 1035

让你瞬间提高工作效率的常用js函数汇总(持续更新)

前言

本文总结了项目开发过程中常用的js函数和正则,意在提高大家平时的开发效率,具体内容如下:

  1. 常用的正则校验
  2. 常用的设备检测方式
  3. 常用的日期时间函数
  4. 跨端事件处理
  5. js移动端适配方案
  6. xss预防方式
  7. 常用的js算法(防抖,截流,去重,排序,模板渲染,观察者...)

代码

  1. 正则
    // 匹配邮箱
    let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$
    

// (新)匹配手机号 let reg = /^1[0-9]{10}$/;

// (旧)匹配手机号 let reg = /^1(3|4|5|7|8)[0-9]{9}$/;

// 匹配8-16位数字和字母密码的正则表达式 let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;

// 匹配国内电话号码 0510-4305211 let reg = /\d{3}-\d{8}|\d{4}-\d{7}/;

// 匹配身份证号码 let reg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

// 匹配腾讯QQ号 let reg = /[1-9][0-9]{4,}/;

// 匹配ip地址 let reg = /\d+.\d+.\d+.\d+/;

// 匹配中文 let reg = /^[\u4e00-\u9fa5]*$/;


2. 检测平台(设备)类型
``` js
let isWechat = /micromessenger/i.test(navigator.userAgent),
    isWeibo = /weibo/i.test(navigator.userAgent),
    isQQ = /qq\//i.test(navigator.userAgent),
    isIOS = /(iphone|ipod|ipad|ios)/i.test(navigator.userAgent),
    isAndroid = /android/i.test(navigator.userAgent);
  1. 常用的日期时间函数
    // 时间格式化
    function format_date(timeStamp) {
     let date = new Date(timeStamp);
     return date.getFullYear() + "年"
         + prefix_zero(date.getMonth() + 1) + "月"
         + prefix_zero(date.getDate()) + "日 "
         + prefix_zero(date.getHours()) + ":"
         + prefix_zero(date.getMinutes());
    }
    

// 数字格式化 function prefix_zero(num) { return num >= 10 ? num : "0" + num; }

// 倒计时时间格式化 function format_time(timeStamp) { let day = Math.floor(timeStamp / (24 * 3600 * 1000)); let leave1 = timeStamp % (24 * 3600 * 1000); let hours = Math.floor(leave1 / (3600 * 1000)); let leave2 = leave1 % (3600 * 1000); let minutes = Math.floor(leave2 / (60 * 1000)); let leave3 = leave2 % (60 * 1000); let seconds = Math.floor(leave3 / 1000); if (day) return day + "天" + hours + "小时" + minutes + "分"; if (hours) return hours + "小时" + minutes + "分" + seconds + "秒"; if (minutes) return minutes + "分" + seconds + "秒"; if (seconds) return seconds + "秒"; return "时间到!"; }


4. 跨端事件处理
``` js
// 是否支持触摸事件
let isSupportTouch = ("ontouchstart" in document.documentElement) ? true : false;

//禁用Enter键表单自动提交
document.onkeydown = function(event) {
    let target, code, tag;
    if (!event) {
        event = window.event; //针对ie浏览器
        target = event.srcElement;
        code = event.keyCode;
        if (code == 13) {
            tag = target.tagName;
            if (tag == "TEXTAREA") { return true; }
            else { return false; }
        }
    }
    else {
        target = event.target; //针对遵循w3c标准的浏览器,如Firefox
        code = event.keyCode;
        if (code == 13) {
            tag = target.tagName;
            if (tag == "INPUT") { return false; }
            else { return true; }
        }
    }
};
  1. 移动端适配方案

    (function (doc, win) {
     var docEl = doc.documentElement,
         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
         recalc = function () {
             var clientWidth = docEl.clientWidth;
             var fontSize = 20;
             docEl.style.fontSize = fontSize + 'px';
             var docStyles = getComputedStyle(docEl);
             var realFontSize = parseFloat(docStyles.fontSize);
             var scale = realFontSize / fontSize;
             console.log("realFontSize: " + realFontSize + ", scale: " + scale);
             fontSize = clientWidth / 667 * 20;
             if(isIphoneX()) fontSize = 19;
             fontSize = fontSize / scale;
             docEl.style.fontSize = fontSize + 'px';
         };
     // Abort if browser does not support addEventListener
     if (!doc.addEventListener) return;
     win.addEventListener(resizeEvt, recalc, false);
     doc.addEventListener('DOMContentLoaded', recalc, false);
    
     // iphoneX判断
     function isIphoneX(){
         return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
     }
    

})(document, window);


6. xss预防方式
``` js
// 敏感符号转义
function entities(s) {
    let e = {
        '"': '"',
        '&': '&',
        '<': '&lt;',
        '>': '&gt;'
    }
    return s.replace(/["<>&]/g, m => {
        return e[m]
    })
}
  1. 常用的js算法
    /**
    * 节流函数--规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
    */
    function throttle(fun, delay) {
     let last, deferTimer
     return function (args) {
         let that = this
         let _args = arguments
         let now = +new Date()
         if (last && now < last + delay) {
             clearTimeout(deferTimer)
             deferTimer = setTimeout(function () {
                 last = now
                 fun.apply(that, _args)
             }, delay)
         }else {
             last = now
             fun.apply(that,_args)
         }
     }
    }
    

/**

  • 防抖函数--在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时
  • / function debounce(fun, delay) { return function (args) {
      let that = this
      clearTimeout(fun.id)
      fun.id = setTimeout(function () {
          fun.call(that, args)
      }, delay)
    } }

// 观察者模式 let Observer = (function(){ let t messages = {}; return { regist: function(type, fn) { if(typeof __messages[type] === 'undefined') { messages[type] = [fn]; }else { __messages[type].push(fn); } }, fire: function(type, args) { if(!messages[type]){ return } let events = { type: type, args: args || {} }, i = 0, len = messages[type].length; for(;i<len;i++){ __messages[type][i].call(this, events); } }, remove: function(type, fn) { if(messages[type] instanceof Array){ let i = __messages[type].length -1; for(;i>=0;i--){ __messages[type][i] === fn && __messages[type].splice(i, 1) } } } } })();

// 模板渲染方法 function formatString(str, data) { return str.replace(/{{(\w+)}}/g, function(match, key) { return typeof data[key] === undefined ? '' : data[key] }) }

// 冒泡排序 function bubbleSort(arr) { for (let i = arr.length - 1; i > 0; i--) { for (let j = 0; j < i; j++) { if (arr[j] > arr[j + 1]) { swap(arr, j, j + 1); } } } return arr; }

// 置换函数 function swap(arr, indexA, indexB) { [arr[indexA], arr[indexB]] = [arr[indexB], arr[indexA]]; }

// 数组去重 function distinct(arr = testArr) { return arr.filter((v, i, array) => array.indexOf(v) === i) }

```

后期会继续总结更多工作中遇到的经典函数,也作为自己在工作中的一点总结。我们当然也可以直接使用lodash或ramda这些比较流行的函数式工具库,在这里仅做学习参考使用。

附录 lodash API中文翻译思维导图

让你瞬间提高工作效率的常用js函数汇总(持续更新)

公众号后台回复 lodash思维导图 获得高清源文件

欢迎关注《趣谈前端》公众号,让我们一起探讨前端的边界.

更多推荐

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
5个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
光头强的博客 光头强的博客
5个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
5个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
小森森 小森森
5个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
5个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
5个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
密钥管理系统-为你的天翼云资产上把“锁
本文关键词:数据安全,密码机,密钥管理一、你的云上资产真的安全么?1.2021年1月,巴西的一个数据库30TB数据被破坏,泄露的数据包含有1.04亿辆汽车和约4000万家公司的详细信息,受影响的人员数量可能有2.2亿;2.2021年2月,广受欢迎的音频聊天室应用Clubhouse的用户数据被恶意黑客或间谍窃取。据悉,一位身份不明的用户能够将Clubho
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实
helloworld_28799839 helloworld_28799839
5个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue