JavaScript Hacks,很多都是在网上看到的,觉得好就记下来了。在这里给大家推荐一个项目,里面很多代码片段都值得学习https://github.com/Chalarangelo/30-seconds-of-code 持续补充
统计字符串中各个字符出现的次数
function repeatCount(str) {
return str.split('').reduce((pre, cur) => (pre[cur]++ || (pre[cur] = 1), pre), {})
}
var str = 'abcdaabc'
var info = repeatCount(str)
console.log(info) // { a: 3, b: 2, c: 2, d: 1 }
URL参数转 key/value
const fomartUrlParams = url =>
url.match(/([^?=&]+)(=([^&]*))/g).reduce(
(a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
)
fomartUrlParams('https://svend.cc/?name=gee1k&gender=man') // -> {name: "gee1k", gender: "man"}
格式化日期时间
const parseTime = (date, fmt) => {
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"S": date.getMilliseconds() //毫秒
}
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length))
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
return fmt
}
parseTime(new Date(), "yyyy-MM-dd")
parseTime(new Date(), "yyyy-MM-dd hh:mm:ss")
parseTime(new Date(), "hh:mm")
深度克隆
const deepClone = (source) => {
if (!source && typeof source !== 'object') {
throw new Error('error arguments', 'shallowClone')
}
const targetObj = source.constructor === Array ? [] : {}
for (const keys in source) {
if (source.hasOwnProperty(keys)) {
if (source[keys] && typeof source[keys] === 'object') {
targetObj[keys] = source[keys].constructor === Array ? [] : {}
targetObj[keys] = deepClone(source[keys])
} else {
targetObj[keys] = source[keys]
}
}
}
return targetObj
}
deepClone({a: '1', b: 2})
阻止事件冒泡
function stopBubble(event){
if (event && event.stopPropagation) {
event.stopPropagation()
} else {
window.event.cancelBubble=true
}
}
防抖
const debounce = (func, wait, immediate) => {
let timeout, args, context, timestamp, result
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function(...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在,重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}
Demo:
const a = () => {console.log('debounce')}
const b = debounce(a, 1000)
setInterval(() => {b()}, 50 )
合并Object
const objectMerge = (target, ...source) => {
if (typeof target !== 'object') {
target = {}
}
source.forEach(src => {
for (const property in src) {
if (src.hasOwnProperty(property)) {
const srcProperty = src[property]
if (typeof srcProperty === 'object') {
target[property] = objectMerge(target[property], srcProperty)
continue
}
target[property] = srcProperty
}
}
})
return target
}
objectMerge({a:1, b: 22}, {a: 5,c: 3}, {s: 234, b: 222, h: {a: 1}}) // -> "{"a":5,"b":222,"c":3,"s":234,"h":{"a":1}}"
数组去重
const deleteDuplicate = arr => [...new Set(arr)]
deleteDuplicate([1, 2, 3, 4, 5, 1, 2, 3]) // -> [1, 2, 3, 4, 5]
数组平均数
const average = arr => arr.reduce((pre, cur) => pre + cur, 0) / arr.length
average([1,2,3]) // -> 2
大写每个单词的首字母【借鉴】
const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase())
capitalizeEveryWord('hello world') // -> 'Hello World'
字符串首字母大写
const capitalize = (str, lowerOther = false) => str.slice(0, 1).toUpperCase() + (lowerOther ? str.slice(1).toLowerCase() : str.slice(1))
capitalize('helloWorld') // -> 'HelloWorld'
capitalize('helloWorld', true) // -> 'Helloworld'
检查回文【借鉴】
const palindrome = str => {
const s = str.toLowerCase().replace(/[\W_]/g,'')
return s === s.split('').reverse().join('')
}
palindrome('abc cba') // -> true
统计数组中值的出现次数【借鉴】
const countOccurrences = (arr, value) => arr.reduce((pre, cur) => cur === value ? pre + 1 : pre + 0, 0)
countOccurrences([1, 1, 2, 1, 2, 3], 1) // -> 3
获取两个数组之间的差集【借鉴】
const difference = (a, b) => {
const s = new Set(b)
return a.filter(x => !s.has(x))
}
difference([1,2,3], [1,2]) // -> [3]
斐波那契数组生成器【借鉴】
生成指定个数的斐波那契数组
const fibonacci = n => Array(n).fill(0).reduce((pre, cur, i) => pre.concat(i > 1 ? pre[i - 1] + pre[i - 2] : i), [])
fibonacci(5) // -> [0,1,1,2,3]
用 Rnage 初始化数组【借鉴】
const rangeArray = (end, start = 0) => Array.apply(null, Array(end - start)).map((v, i) => i + start)
rangeArray(5) // -> [0,1,2,3,4]
范围内的随机整数【借鉴】
const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
randomIntegerInRange(100, 150) // -> 143
范围内的随机数【借鉴】
const randomInRange = (min, max) => Math.random() * (max - min) + min
randomInRange(10,20) // -> 12.27232719315272