10个非常实用的Js工具函数教程视频_函数菜鸟知识

10个非常实用的Js工具函数教程视频

生成一周时间

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

10个非常实用的Js工具函数教程视频_函数菜鸟知识

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(fn,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
      }
    }
  }
}

海计划公众号
(0)
上一篇 2020/03/19 07:12
下一篇 2020/03/19 07:12

您可能感兴趣的内容

  • 程序员沉迷 Bug 可以有多疯?小白基础_bug小白教程

    苍天啊!大地啊!竟然有程序员,因为沉迷代码,快要痛失女友了!那么,程序员写起代码,究竟可以有多沉(shang)迷(yin)?如果你在下班路上,看到有个穿条纹羽绒服的小哥,突然掏出电脑,迅速连上手机热点,并开始蹲在地上噼里啪啦敲键盘,十有八九就是在改Bug!而有一次,晚上八九点了,我在望京某地铁站的厕所里,竟然看到一名女程序员,把电脑放在洗手池上,改-B-u-

    2020/04/03
  • vue单页面应用刷新网页后vuex的state数据丢失的解决方案小白知识_vuex攻略教程

    1. 产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。2. 解决思路一种是state里的数据全部是通过请求来触发action或mutation来改变一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie)中很

    2020/03/30
  • flex弹性布局入门攻略_布局入门攻略

    以下是弹性布局的一些知识点,很简单,易懂!取值:flex:当前元素充当弹性布局的容器,并且本身以块级元素显示。inline-flex:当前元素充当弹性布局的容器,并且本身以行内元素显示。概念:容器:容纳弹性布局中子元素的父元素。项目:容器中的子元素注意:元素一旦变为弹性布局的元素后,float,clear,vertical-align,text-align都

    2020/03/26
  • web前端基础书籍基础知识入门_书籍小白知识

    其实与web相关的书籍还是很多的,因为web的领域就是比较广的,因为有过web开发经验的都知道,web,就开发语言就有php,jsp,asp,.net等多种语言,那么这些语言对应的后台开发就有对应的书籍,所以今天小编就主要推荐与web基础相关的书籍。因为相比之下web前端还是比较轻松入门的。HTML相关:《Web标准实战》 比较简单,适合基础学习《Web标准

    2020/03/20
  • ECMAScript是什么?入门基础知识_语言小白攻略

    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)通过ECMA-262标准化的脚本程序设计语言,一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和

    2020/03/31
  • Deno基础知识教程_Node.js之父新造的轮子

    Deno基础知识教程 官方网址:https://deno.land/ GitHub:https://github.com/denoland/deno 简介描述:Node.js之父新…

    2020/03/06
  • vue-good-table使用教程_简洁的 Vue.js 数据表格组件

    vue-good-table使用教程 官方网址:https://xaksis.github.io/vue-good-table/ GitHub:https://github.com…

    2020/03/06
  • vue菜鸟从业记:没准备好的面试,那叫尬聊攻略教程_面试菜鸟知识

    最近我的朋友王小闰参加了一场面试,在他填写简历表的时候,排在他前面的应聘者正在旁边邻桌接受来自面试官的检验。
    王小闰边写边想,这不就是一会儿要面试自己的前端leader么,现在面试官提问的一些面试题会不会就是待会儿要问自己的问题? 想到这,我朋友王小闰不自觉地竖起了耳朵听,借鉴下别人回答问题的经验,保不齐自己一会儿要套用一下。
    不听不知道,一听吓一跳。没准备

    2020/04/03
  • 从浏览器渲染过程看重绘回流基础教程_渲染基础知识

    渲染过程浏览器渲染过程如下:解析 HTML,生成 DOM 树,解析 CSS,生成 CSSOM 树。将 DOM 树和 CSSOM 树结合,生成渲染树(Render Tree)。Layout(回流): 根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小)。Painting(重绘): 根据渲染树以及回流得到的几何信息,得到节点的绝对像素。D

    2020/03/20
  • 适合程序员的8个副业模式小白知识_副业基础知识

    我的副业故事从 2014 年中到 2017 年中,这三年多的时间里,我本职工作表现优秀的同时,还做过下列 9 类副业:写书视频课程企业内训公众号语音问答知乎 Live视频直播课程GitChat付费 Chat职业规划咨询写书2013 年下半年,我恢复了技术博客的写作,没多久,有一篇写 Qt on Android 的文章引起关注,电子工业出版社的一位编辑联系我出

    2020/03/29
  • 程序员的17种状态,你有过几种?指南攻略_段子入门基础教程

    1明明是个小bug但就是死活修不好…2作为一个码工我意外走入了一个充满PM的会议室…3偶然间看到了自己多年前写的代码4调试过多线程的都会懂!5这就是你们追捧的结对编程6Git merge7当他们问我是否需要兼容IE的时候8当我以为已捕获了所有可能的异常…的时候9你永远try…catch不到所有的可能性!10数据库的Delete语句忘了使用限定

    2020/04/06
  • 极客公园指南攻略只为商业新变量

    极客公园小白攻略 官方网址:http://www.geekpark.net/ 简介描述:只为商业新变量 极客公园聚焦互联网领域,跟踪最新的科技新闻动态,关注极具创新精神的科技产品。…

    2020/03/06
  • 如何实现元素曝光上报?使用帮助_元素基础入门

    进行数据上报的时候,经常会遇到列表数据曝光上报的问题,只对在当前可视范围内的数据内容进行曝光上报,而对于未在可视范围内的数据不进行曝光上报,等待用户滚动页面或者区域使元素出现在可视范围内时才进行曝光上报。解决方案目前针对此类问题,主要有两种解决方案。方案一:监听页面或者区域scroll事件,通过getBoundingClientRect接口取元素的位置与可视

    2020/03/26
  • hutool使用指南_一个Java基础工具类

    hutool使用指南 官方网址:http://www.hutool.cn GitHub:https://github.com/looly/hutool 简介描述:一个Java基础工…

    2020/03/06
  • 前端模块化:CommonJS,AMD,CMD,ES6小白常识_模块化入门教程

    模块化的开发方式可以提高代码复用率,方便进行代码的管理。通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。参见阮一峰老师的文章 module-loader 。一、CommonJSNode.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的

    2020/03/20
  • polacode菜鸟攻略_对一个代码块进行拍照的VS插件

    polacode菜鸟攻略 官方网址:https://marketplace.visualstudio.com/items?itemName=pnp.polacode GitHub:…

    2020/03/07