美文网首页
15条js高效技巧

15条js高效技巧

作者: 彼岸归梦 | 来源:发表于2021-02-05 10:16 被阅读0次

1、延迟函数

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秒

2、分割指定长度的元素数组

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)) // []

3、获取数组交集

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])) // []

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]

5、字符串前面空格去除与替换

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

6、字符串后面空格去除与替换

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

7、获取当前子元素是其父元素下子元素的排位

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

8、获取当前元素相对于document的偏移量

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

9、获取元素类型

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

10、判断是否是移动端

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

11、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()
 } 

12、将指定格式的字符串解析为日期字符串


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 (中国标准时间)

13、禁止网页复制粘贴

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

14、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)
 }

15、去除字符串中的html代码

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

相关文章

  • 实用Javascript调试技巧

    摘要: 高效调试JS代码。 原文:实用Javascript调试技巧分享 作者:MudOnTire Fundebug...

  • Js代码高效技巧

    1、 !(!!)和~符号的使用 说明:!!一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是...

  • 15条高效JS技巧!

    延迟函数delay 分割指定长度的元素数组 获取数组交集 字符串前面空格去除与替换 字符串后面空格去除与替换 获取...

  • 15条js高效技巧

    1、延迟函数 2、分割指定长度的元素数组 3、获取数组交集 4、函数柯里化 5、字符串前面空格去除与替换 6、字符...

  • 这个插件的每个功能都有用!

    栏目「有技巧」是UBook知识在线的高效技巧专栏,专注于分享各种高效好玩的小技巧,发现更多神器,助你更高效地工作、...

  • 你的时间非常宝贵!这个网站助你节省20%的时间

    栏目「有技巧」是UBook知识在线的高效技巧专栏,专注于分享各种高效好玩的小技巧,发现更多神器,助你更高效地工作、...

  • iOS12要来了,你还不知道这些iPhone的隐藏功能?

    「有技巧」是UBook知识在线的高效技巧专栏,专注于分享各种高效好玩的小技巧,发现更多神器,助你更高效地工作、学习...

  • web前端小白案例-京东电梯式导航

    知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,盒子模型,jquery类库调用,JS特效编写...

  • JS开发必须知道的41个技巧

    JS是前端的核心,但有些使用技巧你还不一定知道;本文梳理了JS的41个技巧,帮助大家提高JS的使用技巧 目录Arr...

  • JS开发必须知道的41个技巧

    JS开发必须知道的41个技巧 前言 JS是前端的核心,但有些使用技巧你还不一定知道;本文梳理了JS的41个技巧,帮...

网友评论

      本文标题:15条js高效技巧

      本文链接:https://www.haomeiwen.com/subject/czbbtltx.html