讓你減少加班的15條高效JS技巧!記得收藏哦

来源:https://www.cnblogs.com/coderhf/archive/2020/06/29/13210179.html

延遲函數delay const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) ​ const getData = status => new Promise((resolve, reject) => { ...


延遲函數delay

 const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms))
 ​
 const getData = status => new Promise((resolve, reject) => {
     status ? resolve('done') : reject('fail')
 })
 const getRes = async (data) => {
     try {
         const res = await getData(data)
         const timestamp = new Date().getTime()
         await delay(1000)
         console.log(res, new Date().getTime() - timestamp)
     } catch (error) {
         console.log(error)
     }
 }
 getRes(true) // 隔了1秒

 

分割指定長度的元素數組

 const listChunk = (list, size = 1, cacheList = []) => {
     const tmp = [...list]
     if (size <= 0) {
         return cacheList
     }
     while (tmp.length) {
         cacheList.push(tmp.splice(0, size))
     }
     return cacheList
 }
 ​
 console.log(listChunk([1, 2, 3, 4, 5, 6, 7, 8, 9])) // [[1], [2], [3], [4], [5], [6], [7], [8], [9]]
 console.log(listChunk([1, 2, 3, 4, 5, 6, 7, 8, 9], 3)) // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
 console.log(listChunk([1, 2, 3, 4, 5, 6, 7, 8, 9], 0)) // []
 console.log(listChunk([1, 2, 3, 4, 5, 6, 7, 8, 9], -1)) // []

 

獲取數組交集

 const intersection = (list, ...args) => list.filter(item => args.every(list => list.includes(item)))
 ​
 console.log(intersection([2, 1], [2, 3])) // [2]
 console.log(intersection([1, 2], [3, 4])) // []

 

函數柯里化

 const curring = fn => {
     const { length } = fn
     const curried = (...args) => {
         return (args.length >= length
               ? fn(...args)
               : (...args2) => curried(...args.concat(args2)))
     }
     return curried
 }
 ​
 const listMerge = (a, b, c) => [a, b, c]
 const curried = curring(listMerge)
 console.log(curried(1)(2)(3)) // [1, 2, 3]
 ​
 console.log(curried(1, 2)(3)) // [1, 2, 3]
 ​
 console.log(curried(1, 2, 3)) // [1, 2, 3]

 

字元串前面空格去除與替換

 const trimStart = str => str.replace(new RegExp('^([\\s]*)(.*)$'), '$2')
 console.log(trimStart(' abc ')) // abc  
 console.log(trimStart('123 ')) // 123  

 

字元串後面空格去除與替換

 const trimEnd = str => str.replace(new RegExp('^(.*?)([\\s]*)$'), '$1')
 console.log(trimEnd(' abc ')) //   abc  
 console.log(trimEnd('123 ')) // 123  

 

獲取當前子元素是其父元素下子元素的排位

 const getIndex = el => {
     if (!el) {
         return -1
     }
     let index = 0
     do {
         index++
     } while (el = el.previousElementSibling);
     return index
 }

 

獲取當前元素相對於document的偏移量

 const getOffset = el => {
     const {
         top,
         left
     } = el.getBoundingClientRect()
     const {
         scrollTop,
         scrollLeft
     } = document.body
     return {
         top: top + scrollTop,
         left: left + scrollLeft
     }
 }

 

獲取元素類型

 const dataType = obj => Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();

 

判斷是否是移動端

 const isMobile = () => 'ontouchstart' in window

 

fade動畫

 const fade = (el, type = 'in') {
     el.style.opacity = (type === 'in' ? 0 : 1)
     let last = +new Date()
     const tick = () => {
         const opacityValue = (type === 'in' 
                             ? (new Date() - last) / 400
                             : -(new Date() - last) / 400)
         el.style.opacity = +el.style.opacity + opacityValue
         last = +new Date()
         if (type === 'in'
           ? (+el.style.opacity < 1)
           : (+el.style.opacity > 0)) {
             requestAnimationFrame(tick)
         }
     }
     tick()
 }

 

將指定格式的字元串解析為日期字元串

 const dataPattern = (str, format = '-') => {
     if (!str) {
         return new Date()
     }
     const dateReg = new RegExp(`^(\\d{2})${format}(\\d{2})${format}(\\d{4})$`)
     const [, month, day, year] = dateReg.exec(str)
     return new Date(`${month}, ${day} ${year}`)
 } 
 ​
 console.log(dataPattern('12-25-1995')) // Mon Dec 25 1995 00:00:00 GMT+0800 (中國標準時間)

 

禁止網頁複製粘貼

 const html = document.querySelector('html')
 html.oncopy = () => false
 html.onpaste = () => false

 

### input框限制只能輸入中文

 const input = document.querySelector('input[type="text"]')
 const clearText = target => {
     const {
         value
     } = target
     target.value = value.replace(/[^\u4e00-\u9fa5]/g, '')
 }
 input.onfocus = ({target}) => {
     clearText(target)
 }
 input.onkeyup = ({target}) => {
     clearText(target)
 }
 input.onblur = ({target}) => {
     clearText(target)
 }
 input.oninput = ({target}) => {
     clearText(target)
 }

 

去除字元串中的html代碼

 const removeHTML = (str = '') => str.replace(/<[\/\!]*[^<>]*>/ig, '')
 console.log(removeHTML('<h1>哈哈哈哈<呵呵呵</h1>')) // 哈哈哈哈<呵呵呵

 

 


您的分享是我們最大的動力!

更多相關文章
  • 在開發好用戶標簽以後,如何將標簽應用到實際其實是一個很重要的問題。只有做好產品的設計才能讓標簽發揮真正的價值,本文將介紹用戶畫像的產品化過程。 一、標簽展示 首先是標簽展示功能,這個主要供業務人員和研發人員使用,是為了更直觀的看見整個的用戶標簽體系。 不同的標簽體系會有不同的層級,那麼這個頁面的設計 ...
  • Android自家的,又可以省去findviewbyid(),而且Butterknife上大神都已經推薦使用的,還有什麼理由不去改寫呢。build.gradle中開啟viewBinding功能。Activity 綁定private lateinit var mBinding: ActivityEbo... ...
  • 原文鏈接:https://www.cnblogs.com/qiyer/、https://www.cnblogs.com/qiyer/p/7442680.html ...
  • 序言 疫情基本控制,同時面試也漸漸開始了,以下iOS面試題僅供參考,畢竟面試是不可控的,但懂得越多,自然機會越大! 位元組一面內容: 1、 自我介紹 2、 介紹一下簡歷中的一個項目 3、 面向對象的三個要素 4、 多態? 5、 Java,python,OC運行效率孰高? 6、 Property,其中c ...
  • 新聞 谷歌發佈全新AR技術 單攝像頭即可實現AR景深感應 谷歌發佈首款基於Android 11開發者預覽版的Android TV版 代號“sabrina”:新Android TV電視棒將採用鵝卵石造型 Android 12曝光:谷歌欲全面拋棄對32位的支持 Android 11中的“對話”功能可能不 ...
  • Android app 本地設置信息的保存與調用。preferences.getString後面的文本是調用失敗後的預設顯示值。儲存值一定要實例化一個Editor出來,如果直接使用.edit().putString()不是不可以,但會每次調用都多出一個實例。最後記得要editor.apply()執行... ...
  • 基本類型(棧數據) String Number Boolean null undefined symbol(ES6) 引用類型(堆數據) Array Object Function Date RegExp 等 區分 棧小堆大 1.基礎類型是放置在棧裡面,一般基礎類型的數據都比較小,賦值不影響自身 v ...
  • vue是數據驅動視圖更新的框架, 所以對於vue來說組件間的數據通信非常重要,那麼組件之間如何進行數據通信的呢? 首先我們需要知道在vue中組件之間存在什麼樣的關係, 才更容易理解他們的通信方式, 就好像過年回家,坐著一屋子的陌生人,相互之間怎麼稱呼,這時就需要先知道自己和他們之間是什麼樣的關係。 ...
一周排行
  • 本次課程就正式進入開發部分。 首先我們先搭建項目框架,還是和之前漸進式風格保持一致,除必備組件外,儘量使用原生功能以方便大家理解。 開發工具:vs 2019 或以上 資料庫:SQL SERVER 2017 或以上 其他需要用到的我們在項目過程中再提。 一、新建 MVC項目 1、打開VS 2019,C ...
  • 一.背景說明: 之前分享過一個微服務開發框架, “享一個集成.NET Core+Swagger+Consul+Polly+Ocelot+IdentityServer4+Exceptionless+Apollo+SkyWalking的微服務開發框架”,前兩天在Github上收到一個Issues,是想我 ...
  • 前言 Http我們都已經耳熟能詳了,而關於Http學習的文章網上有很多,各個知識點的講解也可說是深入淺出。然而,學習過後,我們對Http還是一知半解。問題出在了哪? Http是一個客戶機與伺服器之間的通信的協議,真的想學習Http,就必須把客戶機和伺服器也學了,也就是說,必須立體的學習,不然我們永遠 ...
  • 本人製作的這個 “簡易日誌 (SimpleLogger)” 包裡面包含的代碼邏輯,最開始也就是簡單地寫入文本,後來經過實際使用的演化,做了各種優化,添加了一些實用的特性,感覺用著還不錯。正所謂獨樂樂不如眾樂樂,於是將其打包上傳到微軟的包管理庫 NuGet 中,大家可以使用試試,相互交流。 ...
  • 1.需求示意圖 2.需求描述 原本是為了給做unity3d客戶端開發的同事提供不定時的消息推送,比如商城購買道具後服務端將道具信息推送給客戶端。 本篇文章簡化理解,用“相關部門開展活動,向全市人民徵集社會服務改善意見”為例子。但核心想法一致:單向推送(指這個需求上只需要單向)。所以這個功能並不是聊天 ...
  • 找到項目中ServiceStack.Text.dll文件的版本,比如我的版本是5.0.0,到GitHub上下載對應的源碼(https://github.com/ServiceStack/ServiceStack.Text/tags) 打開解決方案,重新生成ServiceStack.Text項目,如果 ...
  • 前言 上一篇文章主要介紹了IL的概念以及基礎的示例代碼,在這一篇文章中我們將通過對象調用看IL。 創建對象與調用方法 class Program { static void Main(string[] args) { var obj = new MyClass(); Console.WriteLin ...
  • abp版本5.9 概述 數據遷移無非就是兩件事情,1、創建資料庫,並根據實體創建對應的表;2、添加一些初始數據 abp的數據遷移也是完成這兩件事,比較特殊的是它是多租戶saas系統,而且支持不同的租戶有獨立的資料庫。所以abp中的遷移要先遷移戶主Host,再遷移租戶Tenant的資料庫 它的遷移定義 ...
  • 本文屬於OData系列 目錄 武裝你的WEBAPI-OData入門 武裝你的WEBAPI-OData便捷查詢 武裝你的WEBAPI-OData分頁查詢 武裝你的WEBAPI-OData資源更新Delta 武裝你的WEBAPI-OData之EDM 武裝你的WEBAPI-OData常見問題 武裝你的WE ...
  • 前言 面試總是會被問到有沒有用過分散式鎖、redis 鎖,大部分讀者平時很少接觸到,所以只能很無奈的回答 “沒有”。本文通過 Spring Boot 整合 redisson 來實現分散式鎖,並結合 demo 測試結果。 首先看下大佬總結的圖 正文 添加依賴 <!--redis--> <depende ...