专栏首页鱼头的Web海洋【适合收藏】让你减少加班的15条高效JS技巧!

【适合收藏】让你减少加班的15条高效JS技巧!

•作者:陈大鱼头•github: KRISACHAN[1]

鱼头辛苦总结的15条非常高效的JS技巧,掌握这15个JS技巧,让你减少加班次数,多抽出点时间来陪女(男)朋友。

正文

延迟函数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>')) // 哈哈哈哈<呵呵呵

后记

以上十个技巧都是我在日常开发中经常用到的一些代码片段,善用这些技巧,可以大大减少我们的开发时间。如果此时正在看文章的你也有类似的技巧心得,不妨在下方留言来分享给大家。

如果你、喜欢探讨技术,或者对本文有任何的意见或建议,你可以扫描下方二维码,关注微信公众号“ 鱼头的Web海洋 ”,随时与鱼头互动。欢迎!衷心希望可以遇见你。

References

[1] KRISACHAN: https://github.com/KRISACHAN

本文分享自微信公众号 - 鱼头的Web海洋(krissarea),作者:陈大鱼头

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端进阶之setTimeout 为什么会出现误差?

    讲到线程,那么肯定也得说一下进程。其实在本质上,两个名词都是 CPU 工作时间片的一个描述。

    陈大鱼头
  • 从ES6到ES10的新特性万字大总结(不得不收藏)

    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛,它往往被称为Jav...

    陈大鱼头
  • 【Hello CSS】第九章-如何画一个体验更好的动画?

    transform 可以设置元素 2D 或者是 3D 的变换,其变换行为有以下几种:

    陈大鱼头
  • JavaScript ES2019 中的 8 项新功能

    JavaScript 一直在不断改进和添加更多新功能。TC39 已经完成,并批准了 ES2019 的 8 项新功能。这个过程包含了 5 个阶段:

    一墨编程学习
  • ES6的let和const

    let let和var很相似,用于声明一个变量。但是let声明的变量只存在块状作用域内。 function order(x, y) { if (x > ...

    IMWeb前端团队
  • ES6的let和const

    由let和const声明的变量都会有自己的TDZ。当进入这个变量的作用域的时候,这个变量是不能被访问的,直到这个变量被初始化。我们来看下面一段代码

    IMWeb前端团队
  • JavaScript 又出新特性了?来看看这篇就明白了

    https://juejin.im/post/5ca2e1935188254416288eb2

    崔庆才
  • 粘包、阻塞与非阻塞、验证客户端的合法性

    三次握手的过程在代码中是由accept和connect共同完成的,具体的细节再socket中没有体现出来

    py3study
  • 10 大 CNN 核心模型完全解析(附源代码,已全部跑通)

    LeNet虽然不是CNN的起点,但却是后来CNN兴起的标志模型。LeNet-5是1998年YannLeCun设计用于手写数字识别的模型。

    Datawhale
  • 程序员怎么升职?

    IT故事会

扫码关注云+社区

领取腾讯云代金券