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工具函数,长期维护更新
JavaScript常用工具函数的更多相关文章
- javascript常用工具函数总结(不定期补充)未指定标题的文章
前言 以下代码来自:自己写的.工作项目框架上用到的.其他框架源码上的.网上看到的. 主要是作为工具函数,服务于框架业务,自身不依赖于其他框架类库,部分使用到es6/es7的语法使用时要注意转码 虽然尽 ...
- javascript常用工具类整理(copy)
JavaScript常用工具类 类型 日期 数组 字符串 数字 网络请求 节点 存储 其他 1.类型 isString (o) { //是否字符串 return Object.prototype.to ...
- vue项目工具文件utils.js javascript常用工具类,javascript常用工具类,util.js
vue项目工具文件utils.js :https://blog.csdn.net/Ajaxguan/article/details/79924249 javascript常用工具类,util.js : ...
- numpy 常用工具函数 —— np.bincount/np.average
numpy 常用工具函数 —— np.bincount/np.average numpy 常用api(一) numpy 常用api(二) 一个函数提供 random_state 的关键字参数(keyw ...
- JavaScript常用工具方法
JavaScript常用工具方法 1.日期格式化 2.将日期字符串转换为Date,字符串格式为(yyyy-mm-dd hh:mm:ss) 3.JS获取当天00:00:00时间和23:59:59的时间 ...
- javascript 实用工具函数
整理日常开发中我们常常会使用到的一些工具函数. var utils = (function(){ var fay = {}; // 返回当前时间的毫秒数 fay.getTime = Date.now( ...
- javascript常用字符串函数和本地存储
concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a.conca ...
- javaScript常用工具库
对应于百度前端技术学院2015年春季的课程2相关内容 https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0002 ht ...
- 手写JavaScript常用的函数
一.bind.call.apply函数的实现 改变函数的执行上下文中的this指向,但不执行该函数(位于Function构造函数的原型对象上的方法) Function.prototype.myBind ...
随机推荐
- 7个技巧让你写出干净的 TSX 代码
原文链接:https://dev.to/ruppysuppy/7-tips-for-clean-react-typescript-code-you-must-know-2da2 "干净的代码 ...
- Typora多线程批量上传图片,永久免费25G图床
为了满足日常需求,就写了一个自动上传图片到图床的脚本 运行该程序可以做到自动完成图片上传,并自动替换为网络链接,支持多图同时上传,采用了多线程,上传速度提升很明显. 以Window系统为例,操作步骤: ...
- MySQL Workbench生成E-R图
因为做毕业设计文档,需要写ER图,故记录此篇 第一步 选择添加 选择数据库 一直next选择要生成的表 再一直下一步就ok了
- x64dbg 插件开发环境配置
x64dbg 是一款开源的应用层反汇编调试器,旨在对没有源代码的可执行文件进行恶意软件分析和逆向工程,同时 x64dbg 还允许用户开发插件来扩展功能,插件开发环境的配置非常简单,如下将简单介绍x64 ...
- git revert总结
git revert git revert 是一种创建一次新的commit 来回退某次或某几次commit的一种方式 命令 // 创建一个新的commit,这个commit会删除(下面)commit- ...
- 关于 JavaScript 中 null 的一切
原文地址:Everything about null in JavaScript 原文作者:Dmitri Pavlutin 译者:Gopal JavaScript 有两种类型:原始类型(strings ...
- C语言可以在执行语句中间定义变量吗?
C语言可以在执行语句中间定义变量吗? 例如:for(int i=0; i<5; i++){ ...
- kettle通过SSH连接Mysql数据库(SSH隧道)
kettle通过SSH连接Mysql数据库(SSH隧道) Kettle无法直接连接使用SSH通道的MySQL,通过SSH隧道(推荐)或者需要借助工具PuTTY(不用时需要注销不推荐),具体操作如下所示 ...
- PLSQL Developer安装详细步骤,小白,转发
下载软件可以直接在百度网盘里面下载 链接:https://pan.baidu.com/s/1bZNJ71d2-hvkM6PTbdpgAA 提取码:t9sh 然后直接参考这个链接进行安装https:// ...
- Mybatis框架搭建
Mybatis框架搭建 思路: 搭建环境 导入Mybatis 编写代码 测试 一.搭建环境 创建数据库 /* Navicat Premium Data Transfer Source Server ...