正文
JavaScript常用工具函数
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
- 检测数据是不是除了symbol外的原始数据
function isStatic(value) {
return (
typeof value === 'string' ||
typeof value === 'number' ||
typeof value === 'boolean' ||
typeof value === 'undefined' ||
value === null
)
}
- 检查数据是否为有效的类数组长度
function isLength(value) {
return (
typeof value == 'number' &&
value > -1 &&
value % 1 == 0 &&
value <= Number.MAX_SAFE_INTEGER
)
}
- 检查数据是否为函数
function isFunction(value) {
return Object.prototype.toString.call(value) === '[object Function]'
}
- 判断数据是否为时间对象
function isDate(value) {
return Object.prototype.toString.call(value) === '[object Date]'
}
- 判断数据是否为正则对象
function isRegExp(value) {
return Object.prototype.toString.call(value) === '[object RegExp]'
}
- 判断数据是否为数组类型的数据
function isArray(arr) {
return Object.prototype.toString.call(arr) === '[object Array]'
}
- 获取数组中非undefined数据中的最大值
function max(arr) {
arr = arr.filter(item => !_isNaN(item))
return arr.length ? Math.max.apply(null, arr) : undefined
}
- 获取数组中非undefined数据中的最小值
function min(arr) {
arr = arr.filter(item => !_isNaN(item))
return arr.length ? Math.min.apply(null, arr) : undefined
}
- 横线转驼峰命名
let camelizeRE = /-(\w)/g
function camelize(str) {
return str.replace(camelizeRE, function (_, c) {
return c ? c.toUpperCase() : ''
})
}
- 驼峰命名转横线命名：拆分字符串，使用 - 相连，并且转换为小写
let hyphenateRE = /\B([A-Z])/g
function hyphenate(str) {
return str.replace(hyphenateRE, '-$1').toLowerCase()
}
- 字符串首位大写
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
- 深拷贝
function deepCopy(obj, hash = new WeakMap()) {
// 日期对象直接返回一个新的日期对象
if (obj.constructor === Date) return new Date(obj)
// 正则对象直接返回一个新的正则对象
if (obj.constructor === RegExp) return new RegExp(obj)
// 如果循环引用了就用WeakMap解决
if (hash.has(obj)) return hash.get(obj)
// 遍历传图参数所有键的特性
let allDesc = Object.getOwnPropertyDescriptor(obj)
// 继承原型链
let copyObj = Object.create(Object.getPrototypeOf(obj), allDesc)
hash.set(obj, copyObj)
for (let key of Reflect.ownKeys(obj)) {
copyObj[key] =
isComplexDataType(obj[key]) && typeof obj[key] !== 'function'
? deepCopy(obj[key], hash)
: obj[key]
}
function isComplexDataType(obj) {
return (
(typeof obj === 'object' || typeof obj === 'function') && obj !== null
)
}
return copyObj
}
- 数据深、浅拷贝
function deepCLone(obj) {
// 定义变量检测传递参数是对象还是数组
let objClone = Array.isArray(obj) ? [] : {}
if (obj && typeof obj === 'object' && obj != null) {
// 判断obju存在且类型为对象时，因为null也是
for (let key in obj) {
// 遍历对象类型的obj,判断obj中是否存在key属性
if (obj.hasOwnProperty(key)) {
// 判断如果obj[key]存在且是对象类型时应进行深拷贝,即在堆内存中开辟新的内存
if (obj[key] && typeof obj[key] === 'object') {
// 递归实现深拷贝
objClone[key] = deepCLone(obj[key])
} else {
// 浅拷贝
objClone[key] = obj[key]
}
}
}
}
return objClone
}
- 获取数据类型，返回结果为 Number、String、Object、Array等
function getRawType(value) {
return Object.prototype.toString.call(value).slice(8, -1)
}
- 格式化时间
/**
* @name: dateFormater
* @msg: 格式化时间
* @param {*} formater 预期时间格式
* @param {*} t 时间，可为空
* @return {*}
*/
function dateFormater(formater, t) {
let date = t ? new Date(t) : new Date(),
Y = date.getFullYear() + '',
M = date.getMonth() + 1,
D = date.getDate(),
H = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds()
return formater
.replace(/YYYY|yyyy/g, Y)
.replace(/YY|yy/g, Y.substring(2, 2))
.replace(/MM/g, (M < 10 ? '0' : '') + M)
.replace(/DD/g, (D < 10 ? '0' : '') + D)
.replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
.replace(/mm/g, (m < 10 ? '0' : '') + m)
.replace(/ss/g, (s < 10 ? '0' : '') + s)
}
- 获取url参数，返回一个对象
function GetUrlParam() {
let url = document.location.toString()
let arrObj = url.split('?')
let params = Object.create(null)
if (arrObj.length > 1) {
arrObj = arrObj[1].split('&')
arrObj.forEach(item => {
item = item.split('=')
params[item[0]] = item[1]
})
}
return params
}
// ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"}
- base64转blob
/**
* @desc base64转blob
* @param {String} data base64
* @return {Blob} blob
*/
function dataURLtoBlob(data) {
const dataAtob = atob(data)
let dataLength = dataAtob.length
const u8arr = new Uint8Array(dataLength)
while (dataLength--) {
u8arr[dataLength] = dataAtob.charCodeAt(dataLength)
}
return new Blob([u8arr])
}
- base64数据导出文件。文件下载
function downloadFile(filename, data) {
let DownloadLink = document.createElement('a')
if (DownloadLink) {
document.body.appendChild(DownloadLink)
DownloadLink.style = 'display: none'
DownloadLink.download = filename
DownloadLink.href = data
if (document.createEvent) {
let DownloadEvt = document.createEvent('MouseEvents')
DownloadEvt.initEvent('click', true, false)
DownloadLink.dispatchEvent(DownloadEvt)
} else if (document.createEventObject) DownloadLink.fireEvent('onclick')
else if (typeof DownloadLink.onclick == 'function') DownloadLink.onclick()
document.body.removeChild(DownloadLink)
}
}
- 下载文件
/**
* @desc 下载文件
* @param {String} data 二进制流文件
* @param {String} fileName 文件名
* @param {boolean} transformBlob 是否是Blob,默认不传无需转换
*/
export function download(data, fileName, transformBlob) {
const blob = !transformBlob ? data : dataURLtoBlob(data)
const blobUrl = window.URL.createObjectURL(blob)
// desc:兼容IE浏览器blob文件下载
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, fileName)
} else {
const a = document.createElement('a')
a.style.display = 'none'
a.href = blobUrl
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(blobUrl)
}
}
- 页面全屏
function toFullScreen() {
let el = document.documentElement
let rfs =
el.requestFullScreen ||
el.webkitRequestFullScreen ||
el.mozRequestFullScreen ||
el.msRequestFullScreen
//typeof rfs != "undefined" && rfs
if (rfs) {
rfs.call(el)
} else if (typeof window.ActiveXObject !== 'undefined') {
//for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
let wscript = new ActiveXObject('WScript.Shell')
if (wscript != null) {
wscript.SendKeys('{F11}')
}
} else {
alert('浏览器不支持全屏')
}
}
- 退出全屏
function exitFullscreen() {
let el = parent.document
let cfs =
el.cancelFullScreen ||
el.webkitCancelFullScreen ||
el.mozCancelFullScreen ||
el.exitFullScreen
//typeof cfs != "undefined" && cfs
if (cfs) {
cfs.call(el)
} else if (typeof window.ActiveXObject !== 'undefined') {
//for IE，这里和fullScreen相同，模拟按下F11键退出全屏
let wscript = new ActiveXObject('WScript.Shell')
if (wscript != null) {
wscript.SendKeys('{F11}')
}
} else {
alert('切换失败,可尝试Esc退出')
}
}
- 利用performance.timing进行性能分析
window.onload = function () {
setTimeout(function () {
let t = performance.timing
console.log(
'DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0)
)
console.log('TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0))
console.log(
'request请求耗时 ：' + (t.responseEnd - t.responseStart).toFixed(0)
)
console.log(
'解析dom树耗时 ：' + (t.domComplete - t.domInteractive).toFixed(0)
)
console.log(
'白屏时间 ：' + (t.responseStart - t.navigationStart).toFixed(0)
)
console.log(
'domready时间 ：' +
(t.domContentLoadedEventEnd - t.navigationStart).toFixed(0)
)
console.log(
'onload时间 ：' + (t.loadEventEnd - t.navigationStart).toFixed(0)
)
if ((t = performance.memory)) {
console.log(
'js内存使用占比 ：' +
((t.usedJSHeapSize / t.totalJSHeapSize) * 100).toFixed(2) +
'%'
)
}
})
}
- 禁止某些键盘事件
document.addEventListener('keydown', function (event) {
return (
!(
(
112 == event.code || //F1
123 == event.code || //F12
(event.ctrlKey && 82 == event.code) || //ctrl + R
(event.ctrlKey && 78 == event.code) || //ctrl + N
(event.shiftKey && 121 == event.code) || //shift + F10
(event.altKey && 115 == event.code) || //alt + F4
('A' == event.srcElement.tagName && event.shiftKey)
) //shift + 点击a标签
) || (event.returnValue = false)
)
})
- 禁止右键、选择、赋值
['contextmenu', 'selectstart', 'copy'].forEach(function (ev) {
document.addEventListener(ev, function (event) {
return (event.returnValue = false)
})
})
常用js工具函数，长期维护更新
