10個非常實用的JS工具函數

2021-03-02 web前端開發
作者 | WahFung
出處 | http://www.cnblogs.com/chanwahfung生成一周時間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') // trueisType(/\d/, 'RegExp') // trueisType(new Date(), 'Date') // trueisType(function(){}, 'Function') // trueisType(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: []}
日期格式化一個很靈活的日期格式化函數，可以根據使用者給定的格式進行格式化，能應對大部分場景。
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      }    }  }}

相關焦點

  • 10 個實用的 Vue.js 工具和庫
    只要你認真對待 Vue 的開發工作，逐漸就會發現很多優秀的基礎工具和庫。這些工具將點亮你的 Vue 開發職業生涯，讓你渾身上下散發專業氣息。本文總結了一些最值得關注的工具和庫，相信你遲早會用在自己的 Vue.js 項目中。
  • 推薦幾款非常不錯的Node.js測試工具
    在構建Node.js應用時，通常你會採用哪些工具進行測試呢？單元測試、BDD還是採用其他測試方法，比如框架和系統測試？本文我們將推薦幾款非常不錯的測試工具，希望在選擇Node.js開發時對你有所幫助。Node.js的偉大在於其已開發出多種開發工具、框架以及使用教程。唯一的缺陷是還有一些不太成熟和零散的選項。由於Spring框架或Hibernate沒有被廣泛使用，因此演變出多種選項。希望Node.js社區能夠攜手並進為killer Rails或者Spring類型開發出一套成熟的實用工具。 Node.js擁有一組令人驚奇的強大且成熟的測試工具。
  • 高階函數不會用?教你JS中最實用的幾個高階函數用法
    /index.js"></script></body>// index.js// 回調函數// 異步請求let getInfo = function(keywords, callback) { $.ajax({ url: 'http
  • Node.js 入門到幹活,10 個項目就夠了
    Node.js 入門到幹活，10 個項目就夠了 Node.js 在很多大公司都有不錯的實踐，比如：淘寶、天貓 Web 版，很多頁面都是在 Node 伺服器上渲染的。還有各種腳手架、前端打包發布工具、構建生態的小工具，也基本都是 Node.js 編寫的。
  • 50個實用的JavaScript工具
    安全工具　　AttackAPI　　AttackAPI是一個基於Web的攻擊構造庫，它可以結合PHP、JavaScript及其他客戶端和伺服器端技術進行使用。　　SAJAX　　是一款被封裝的ajax工具，非常方便與後臺的交互，對XMLHttpRequest對象進行了封裝，可以實現對伺服器的異步請求，簡化操作。
  • 15個提高編程技巧的JavaScript工具
    JavaScript主要用於編寫嵌入或者包含在HTML頁面的函數，從而實現DOM之間的交互。 這篇文章收集了15個可用於提高編程技巧的JavaScript工具，助你輕鬆快速完成工作。下面的這些JavaScript工具能讓你管理Javascript狀態、壓縮JavaScript代碼、重構腳本代碼結構等等。真誠地希望以下這些工具能對你有用。
  • 最新Node.js框架:Koa 2 實用入門
    Koa2是目前Node.js世界最火的web框架，無論從性能，還是流程控制上，koa 2和它的後宮（中間件）都是非常好的解決方案。
  • 介紹PHP中的10個實用函數
    PHP的功能越來越強大，裡面有著非常豐富的內置函數。
  • js中對函數的深入理解(下)
    在js函數中，有一個特殊的對象this，this引用的就是函數執行的環境對象，當在全局作用域中的時候，this指向的對象就是window；這裡getName函數的作用域是window，當我們直接調用該函數的時候，this指向的是window對象
  • 10個最實用的個時間軸插件(帶詳細說明)
    但是，要是你用上了下面10款實用的時間軸插件，不僅能為你減少開支，還能為網站增彩不少了。Timeglider.jsTimeglider.js 是我想要介紹的第一款插件，它通過拖動位於右側的下的滑塊，你可以通過移動滑塊上下放大和縮小頁面。還可以使用滑鼠滾輪進行放大和縮小。
  • 盤點十個超級實用的 JS 特性
    解構賦值還可以用於函數和參數。函數有不止 2-3 個參數時，使用一個對象收集所有參數是 JavaScript 的事實標準。考慮下面的代碼：// math.jsexportfunctionadd(a,b) { return a + b; }exportfunctionsub(a,b) { return a - b; }exportdefault mult(a,b)
  • js代碼優化之編程函數
    在編程的世界中，有這樣的一個原則，簡稱二八定律二八定律：影響程序的80%性能的往往是20%的代碼在js的編寫過程中，函數設計就相當於那20%，時刻影響著你的代碼，可以說是至關重要。那麼對於函數的設計原則，你又了解多少？1.
  • 30個值得推薦的數據可視化工具（2020年更新）
    開發者剛開始學習D3.js時會感到很複雜，但是D3.js功能強大，非常靈活，值得開發者深入學習研究。需要注意的是，D3.js無法在較低版本的IE瀏覽器中正常顯示圖形。Chart.js是一個開源的JavaScript函數庫，它為設計人員和開發人員提供8個可定製的動態可視化展現方式，用HTML5 Canvas高效地繪製響應式圖表。
  • 怎麼在click事件中調用多個js函數
    源 / php中文網      源 / www.php.cnjs中的click事件想要實現調用多個函數的功能，我們可以使用addEventListener()方法。也就是說如果要在按鈕的單擊事件中調用或執行多個函數，就可以使用JavaScript addEventListener()方法。下面我們就結合具體的代碼示例，給大家介紹js中的click事件調用多個函數的實現方法。代碼示例如下：<!
  • 10個強大的Node.JS框架,加速您的Web開發
    話不多說，讓我們看看一些最強大的Node.js框架，它們可以加速您的Web應用程式開發。Hapi.jsHapi.js是Node.js最強大的框架之一。它功能豐富，功能強大。它用於構建與API和其他軟體應用程式接口的應用程式。
  • p5.js介紹
    p5.js是一個對初學者非常友好的編程環境，我以親身經歷作證。我學習的第一個程式語言是C語言，後來又接觸到VB，JAVA，Android等。p5.js可以說是我迄今為止所見到過的最容易入手的程式語言。在你學習p5.js的同時，還可以幫助你學習JavaScript，能夠將製作出來的有創意，有趣的東西呈現在任何的瀏覽器上。
  • Bowery為什麼放棄Node.js,轉向Go?
    【編者按】Go語言自從面世就受到了很多開發者的歡迎，越來越多的項目基於Go語言實現，例如非常著名的雲計算項目Docker。而本文作者分享了其從Node.js轉到Go語言後，整個開發平臺的性能得到顯著提升，並從中總結出Go的六大亮點。
  • 55 個實用的大數據可視化分析工具
    http://jsdraw2dx.jsfiction.com/二十一、Pizza Pie ChartsPizza Pie Charts是個響應式餅圖圖表，基於Adobe Snap SVG框架，通過HTML標記和CSS來替代JavaScript對象，更容易集成各種先進的技術。
  • 從TensorFlow.js入手了解機器學習
    我學習機器學習沒有多久，在這個領域是個新手，在本文裡我將嘗試用自己的理解去解釋一些概念。不過，在使用已有的 AI 模型的時候我們並不需要很深的機器學習知識。我們可以使用現有的一些工具比如 Keras、TensorFlow 或 TensorFlow.js。這裡我們將看看如何創建 AI 模型並且使用 TensorFlow.js 中的一些複雜的模型。
  • 10個常見的JS語言錯誤總匯
    任何執行和處理 DOM 元素的 js 代碼都應該在創建 DOM 元素之後執行。js 代碼按照 html 中的規定從上到下進行解釋。 所以，如果 DOM 元素之前有一個標籤，腳本標籤內的 js 代碼將在瀏覽器解析 html 頁面時執行。如果在加載腳本之前尚未創建 DOM 元素，則會出現此錯誤。