值得收藏的15条高效JS技巧

更新日期: 2020-07-01阅读: 2.4k标签: 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>')) // 哈哈哈哈<呵呵呵

 

链接: https://fly63.com/article/detial/9376

通过原生js判断网页图片是否已加载成功的方法总汇

在写网页的程序的时候,经常碰到要在网页加载完全之后再去展现页面,加载中的时候通过显示loading...的样式。这时候我们会直接想到使用window.onload的方式,或者是img对象的complete属性

JavaScript 异步调用——从小小题目逐步走进 JavaScript 异步调用

async/await 语法让异步调用写起来像写同步代码,在编写代码的时候,可以避免逻辑跳跃,写起来会更轻松。

UglifyJS3的使用,UglifyJS3中文文档

使用UglifyJS合并/压缩JavaScript ,UglifyJS3与UglifyJS2相比API变动较大,简化较多,文档也增加了不少示例。

不用if撸代码,是件很有趣的事。

试着不用if撸代码,是件很有趣的事,而且,万一你领会了什么是“数据即代码,代码即数据”呢?

带你理解 JS 容易出错的坑和细节

本文重在列出并解释说明 JS 中各种容易出错的坑和细节,供大家更加深入理解为什么 JS 会这样

一行能装逼的JavaScript代码

一行能装逼的JavaScript代码,其实靠的是js的类型转化的一些基本原理,本篇就来揭密”sb”是如何炼成的。相信你如果能把这个理清楚了,以后遇到类型转化之类的题目,就可以瞬间秒杀了。

JavaScript:处理值为undefined的7个技巧

学习JavaScript时,当时我对于undefined 和 null 比较困惑 ,因为他们都表示空值。他们有什么明确的区别吗?他们似乎都可以定义一个空值,而且 当你进行 在做null ===undefined 的比较时,结果是true。

js中一些怪异的写法_神奇的JavaScript

JavaScript是一门伟大的语言,作为一门弱类型语言,它拥有非常简洁的语法,庞大的生态系统,灵活性非常强大。js各种神奇的写法,所谓的神奇也就是罕见。下面就开始介绍这些怪异的写法吧。

js方式实现手机号码隐藏中间4位

在前端开发中,遇到如下需求:隐藏手机号码,将中间几位替换为*。通过js如何实现手机号码隐藏中间4位呢?下面整理几种实现方式:使用正则、通过长度截取。

js实现浏览器:加入收藏、设为首页、保存到桌面的方法功能

在一些网页中我们可以常见的“设置为首页”和“ 收藏本站”,以及“保存到桌面”等功能,使用js是如何实现的呢?这里为大家分享下实现方法,完美兼容IE,chrome,ff等浏览器

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!