通用工具
代码笔记大约 3 分钟
通用工具
UUID 生成
function generateUUID() {
// Public Domain/MIT
var d = new Date().getTime() //Timestamp
var d2 =
(typeof performance !== 'undefined' &&
performance.now &&
performance.now() * 1000) ||
0 //Time in microseconds since page-load or 0 if unsupported
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 //random number between 0 and 16
if (d > 0) {
//Use timestamp until depleted
r = (d + r) % 16 | 0
d = Math.floor(d / 16)
} else {
//Use microseconds since page-load if supported
r = (d2 + r) % 16 | 0
d2 = Math.floor(d2 / 16)
}
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16)
})
}
复制到剪贴板
function copyToClipboard(str) {
if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard.writeText(str)
} else {
const el = document.createElement('textarea')
el.value = str
el.setAttribute('readonly', '')
el.style.position = 'absolute'
el.style.left = '-9999px'
document.body.appendChild(el)
el.select()
document.execCommand('copy')
document.body.removeChild(el)
}
}
获取地址栏参数
function getURLParameters(url) {
const newUrl = url || window.location.href
return (newUrl.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => (
(a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
),
{}
)
}
睡眠 Sleep
// 同步
function sleepSync(ms) {
const end = new Date().getTime() + ms
while (new Date().getTime() < end) {
/* do nothing */
}
}
// 例子🌰
const printNums = () => {
console.log(1)
sleepSync(500)
console.log(2)
console.log(3)
}
// 异步
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
// 例子🌰
const printNums = async () => {
console.log(1)
await sleep(500)
console.log(2)
console.log(3)
}
深度合并对象
function deepMerge(a, b, fn) {
return [...new Set([...Object.keys(a), ...Object.keys(b)])].reduce(
(acc, key) => ({ ...acc, [key]: fn(key, a[key], b[key]) }),
{}
)
}
// 例子🌰
deepMerge(
{ a: true, b: { c: [1, 2, 3] } },
{ a: false, b: { d: [1, 2, 3] } },
(key, a, b) => (key === 'a' ? a && b : Object.assign({}, a, b))
)
// { a: false, b: { c: [ 1, 2, 3 ], d: [ 1, 2, 3 ] } }
重命名键
function renameKeys(keysMap, obj) {
return Object.keys(obj).reduce(
(acc, key) => ({
...acc,
...{ [keysMap[key] || key]: obj[key] }
}),
{}
)
}
// 例子🌰
const obj = { name: 'Bobo', job: 'Front-End Master', shoeSize: 100 }
renameKeys({ name: 'firstName', job: 'passion' }, obj)
// { firstName: 'Bobo', passion: 'Front-End Master', shoeSize: 100 }
解析 Cookie
export const parseCookie = (str) =>
str
.split(';')
.map((v) => v.split('='))
.reduce((acc, v) => {
acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim())
return acc
}, {})
// 例子🌰
parseCookie('foo=bar; equation=E%3Dmc%5E2')
// { foo: 'bar', equation: 'E=mc^2' }
序列化 Form
export const serializeForm = (form) =>
Array.from(new FormData(form), (field) =>
field.map(encodeURIComponent).join('=')
).join('&')
// 例子🌰
serializeForm(document.querySelector('#form'))
// email=test%40email.com&name=Test%20Name
Form 转 Object
export const formToObject = (form) =>
Array.from(new FormData(form)).reduce(
(acc, [key, value]) => ({
...acc,
[key]: value
}),
{}
)
// 例子
formToObject(document.querySelector('#form'))
// { email: 'test@email.com', name: 'Test Name' }
是否是浏览器环境
export const isBrowser = () =>
![typeof window, typeof document].includes('undefined')
// 例子
isBrowser() // true (browser)
isBrowser() // false (Node)
是否是绝对 URL
export const isAbsoluteURL = (str) => /^[a-z][a-z0-9+.-]*:/.test(str)
// 例子
isAbsoluteURL('https://google.com') // true
isAbsoluteURL('ftp://www.myserver.net') // true
isAbsoluteURL('/foo/bar') // false
检测当前用户的首选语言
export const detectLanguage = (defaultLang = 'en-US') =>
navigator.language ||
(Array.isArray(navigator.languages) && navigator.languages[0]) ||
defaultLang
// 例子
detectLanguage() // 'zh-CN'
检测用户设备类型
export const detectDeviceType = () =>
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
)
? 'Mobile'
: 'Desktop'
// 例子
detectDeviceType() // 'Mobile' or 'Desktop'
检查是否启用 localStorage
export const isLocalStorageEnabled = () => {
try {
const key = `__storage__test`
window.localStorage.setItem(key, null)
window.localStorage.removeItem(key)
return true
} catch (e) {
return false
}
}
// 例子
isLocalStorageEnabled() // true, if localStorage is accessible
检查是否启用 sessionStorage
export const isSessionStorageEnabled = () => {
try {
const key = `__storage__test`
window.sessionStorage.setItem(key, null)
window.sessionStorage.removeItem(key)
return true
} catch (e) {
return false
}
}
isSessionStorageEnabled() // true, if sessionStorage is accessible
检查是否支持 Touch 事件
export const supportsTouchEvents = () => window && 'ontouchstart' in window
// 例子
supportsTouchEvents() // true
深度对象比较
export const deepEquals = (a, b) => {
if (a === b) return true
if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime()
if (!a || !b || (typeof a !== 'object' && typeof b !== 'object'))
return a === b
if (a.prototype !== b.prototype) return false
const keys = Object.keys(a)
if (keys.length !== Object.keys(b).length) return false
return keys.every((k) => equals(a[k], b[k]))
}
// 例子
const a = { name: 'John', age: 26 }
const b = { name: 'John', age: 26 }
equals(a, b) // true
const c = { name: 'John' }
const d = { name: 'John', age: undefined }
equals(c, d) // false
数组转嵌套对象
export const setValueToField = (fields, value) => {
const reducer = (acc, item, index, arr) => ({
[item]: index + 1 < arr.length ? acc : value
})
return fields.reduceRight(reducer, {})
}
// 例子
const targetObject = setValueToField(['one', 'two', 'three'], 'nice')
console.log(targetObject) // Output: { one: { two: { three: 'nice' } } }
获取 min-max 之前的随机数
export const getRandom = (min, max) =>
Math.floor(Math.random() * (max - min + 1) + min)
生成随机字符串
export const randomString = () => Math.random().toString(36).slice(2)
Powered by Waline v2.14.7