10个非常实用的JS工具函数

可莉
• 阅读 391

10个非常实用的JS工具函数

作者: chanwahfung

https://www.cnblogs.com/chanwahfung/p/12404880.html

生成一周时间

new Array 创建的数组只是添加了length属性,并没有实际的内容。通过扩展后,变为可用数组用于循环

function getWeekTime(){   return [...new Array(7)].map((j,i)=> new Date(Date.now()+i*8.64e7).toLocaleDateString()) }

使用

getWeekTime() // ["2020/2/26", "2020/2/27", "2020/2/28", "2020/2/29", "2020/3/1", "2020/3/2", "2020/3/3"]

类型判断

判断核心使用Object.prototype.toString,这种方式可以准确的判断数据类型。

/**  * @param {any} target   * @param {string} type   * @return {boolean}   */ function isType(target, type) {   let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()   return targetType === type.toLowerCase() }

使用

isType([], 'Array') // true isType(/\d/, 'RegExp') // true isType(new Date(), 'Date') // true isType(function(){}, 'Function') // true isType(Symbol(1), 'Symbol') // true

对象属性剔除

应用场景很简单,当你需要使用一个对象,但想移除部分属性时,可以使用该方法。同样的,你可以实现一个对象属性选取方法。

/**  * @param {object} object  * @param {string[]} props  * @return {object}  */ function omit(object, props=[]){   let res = {}   Object.keys(object).forEach(key=>{     if(props.includes(key) === false){       res[key] = typeof object[key] === 'object' && object[key] !== null ?         JSON.parse(JSON.stringify(object[key])):         object[key]     }   })   return res }

使用

let data = {   id: 1,   title: 'xxx',   comment: [] } omit(data, ['id']) // {title: 'xxx', comment: []}

日期格式化

一个很灵活的日期格式化函数,可以根据使用者给定的格式进行格式化,能应对大部分场景

/**  * @param {string} format  * @param {number} timestamp - 时间戳  * @return {string}   */ function formatDate(format='Y-M-D h:m', timestamp=Date.now()){   let date = new Date(timestamp)   let dateInfo = {     Y: date.getFullYear(),     M: date.getMonth()+1,     D: date.getDate(),     h: date.getHours(),     m: date.getMinutes(),     s: date.getSeconds()   }   let formatNumber = (n) => n > 10 ? n : '0' + n   let res = format     .replace('Y', dateInfo.Y)     .replace('M', dateInfo.M)     .replace('D', dateInfo.D)     .replace('h', formatNumber(dateInfo.h))     .replace('m', formatNumber(dateInfo.m))     .replace('s', formatNumber(dateInfo.s))   return res }

使用

formatDate() // "2020-2-24 13:44" formatDate('M月D日 h:m') // "2月24日 13:45" formatDate('h:m Y-M-D', 1582526221604) // "14:37 2020-2-24"

性能分析

Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能

performance.timing 包含延迟相关的性能信息

performance.memory 包含内存信息,是Chrome中添加的一个非标准扩展,在使用时需要注意

window.onload = function(){   setTimeout(()=>{     let t = performance.timing,         m = performance.memory     console.table({       'DNS查询耗时': (t.domainLookupEnd - t.domainLookupStart).toFixed(0),       'TCP链接耗时': (t.connectEnd - t.connectStart).toFixed(0),       'request请求耗时': (t.responseEnd - t.responseStart).toFixed(0),       '解析dom树耗时': (t.domComplete - t.domInteractive).toFixed(0),       '白屏时间': (t.responseStart - t.navigationStart).toFixed(0),       'domready时间': (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0),       'onload时间': (t.loadEventEnd - t.navigationStart).toFixed(0),       'js内存使用占比': m ? (m.usedJSHeapSize / m.totalJSHeapSize * 100).toFixed(2) + '%' : undefined     })   }) }

防抖

性能优化方案,防抖用于减少函数请求次数,对于频繁的请求,只执行这些请求的最后一次。

基础版本

function debounce(func, wait = 300){   let timer = null;   return function(){     if(timer !== null){       clearTimeout(timer);     }     timer = setTimeout(func.bind(this),wait);   } }

改进版本添加是否立即执行的参数,因为有些场景下,我们希望函数能立即执行。

/**  * @param {function} func - 执行函数  * @param {number} wait - 等待时间  * @param {boolean} immediate - 是否立即执行  * @return {function}  */ function debounce(func, wait = 300, immediate = false){   let timer, ctx;   let later = (arg) => setTimeout(()=>{     func.apply(ctx, arg)     timer = ctx = null   }, wait)   return function(...arg){     if(!timer){       timer = later(arg)       ctx = this       if(immediate){         func.apply(ctx, arg)       }     }else{       clearTimeout(timer)       timer = later(arg)     }   } }

使用

let scrollHandler = debounce(function(e){   console.log(e) }, 500) window.onscroll = scrollHandler

节流

性能优化方案,节流用于减少函数请求次数,与防抖不同,节流是在一段时间执行一次。

/**  * @param {function} func - 执行函数  * @param {number} delay - 延迟时间  * @return {function}  */ function throttle(func, delay){   let timer = null   return function(...arg){     if(!timer){       timer = setTimeout(()=>{         func.apply(this, arg)         timer = null       }, delay)     }   } }

使用

let scrollHandler = throttle(function(e){   console.log(e) }, 500) window.onscroll = scrollHandler

base64数据导出文件下载

/**  * @param {string} filename - 下载时的文件名  * @param {string} data - base64字符串  */ function downloadFile(filename, data){     let downloadLink = document.createElement('a');     if ( downloadLink ){       document.body.appendChild(downloadLink);       downloadLink.style = 'display: none';       downloadLink.download = filename;       downloadLink.href = data;       if ( document.createEvent ){         let downloadEvt = document.createEvent('MouseEvents');         downloadEvt.initEvent('click', true, false);         downloadLink.dispatchEvent(downloadEvt);       } else if ( document.createEventObject ) {       downloadLink.fireEvent('onclick');       } else if (typeof downloadLink.onclick == 'function' ) {       downloadLink.onclick();     }     document.body.removeChild(downloadLink);     }   }

检测是否为PC端浏览器

function isPCBroswer() {     let e = window.navigator.userAgent.toLowerCase()       , t = "ipad" == e.match(/ipad/i)       , i = "iphone" == e.match(/iphone/i)       , r = "midp" == e.match(/midp/i)       , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)       , a = "ucweb" == e.match(/ucweb/i)       , o = "android" == e.match(/android/i)       , s = "windows ce" == e.match(/windows ce/i)       , l = "windows mobile" == e.match(/windows mobile/i);   return !(t || i || r || n || a || o || s || l)   }

识别浏览器及平台

function getPlatformInfo(){   //运行环境是浏览器    let inBrowser = typeof window !== 'undefined';     //运行环境是微信    let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;     let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();     //浏览器 UA 判断    let UA = inBrowser && window.navigator.userAgent.toLowerCase();   if(UA){     let platforms = {       IE: /msie|trident/.test(UA),       IE9: UA.indexOf('msie 9.0') > 0,       Edge: UA.indexOf('edge/') > 0,       Android: UA.indexOf('android') > 0 || (weexPlatform === 'android'),       IOS: /iphone|ipad|ipod|ios/.test(UA) || (weexPlatform === 'ios'),       Chrome: /chrome\/\d+/.test(UA) && !(UA.indexOf('edge/') > 0),     }     for (const key in platforms) {       if (platforms.hasOwnProperty(key)) {         if(platforms[key]) return key       }     }   } }

- END -


近期

从源码解读React 和 Vue 的20个区别

彻底理解浏览器的Http缓存机制

10个非常实用的JS工具函数

若此文有用,何不素质三连❤️

本文分享自微信公众号 - Vue中文社区(vue_fe)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
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
Easter79 Easter79
3年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这