魚頭辛苦總結的15條很是高效的JS技巧，掌握這15個JS技巧，讓你減小加班次數，多抽出點時間來陪女（男）朋友。javascript
1.延遲函數delay
html
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 = () => falsehtml.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>')) // 哈哈哈哈<呵呵呵
以上十五個技巧都是我在平常開發中常常用到的一些代碼片斷，善用這些技巧，能夠大大減小咱們的開發時間。若是此時正在看文章的你也有相似的技巧心得，不妨在下方留言來分享給你們。vue
References
[1] KRISACHAN: https://github.com/KRISACHANjava
Medium 2w+贊，高效程序員擁有的 7 個習慣！
git
本文分享自微信公衆號 - Vue中文社區（vue_fe）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。程序員