送你一波JS 开发常用工具函数～

点击上方“IT平头哥联盟”，选择“置顶或者星标”
一起进步～

作者：hfhan
https://segmentfault.com/a/1190000019601333

1、isStatic：检测数据是不是除了symbol外的原始数据

function isStatic(value) {

复制代码

return(

复制代码

typeof value === 'string' ||

复制代码

typeof value === 'number' ||

复制代码

typeof value === 'boolean' ||

复制代码

typeof value === 'undefined' ||

复制代码

value === null

复制代码

)

复制代码

}

复制代码

[h1]2、isPrimitive：检测数据是不是原始数据[/h1]

function isPrimitive(value) {

复制代码

return isStatic(value) || typeof value === 'symbol'

复制代码

}

复制代码

[h1]3、isObject：判断数据是不是引用类型的数据 (例如： arrays, functions, objects, regexes, new Number(0),以及 new String(''))[/h1]

function isObject(value) {

复制代码

let type = typeof value;

复制代码

return value != null && (type == 'object' || type == 'function');

复制代码

}

复制代码

[h1]4、isObjectLike：检查 value 是否是类对象。如果一个值是类对象，那么它不应该是 null，而且 typeof 后的结果是 "object"[/h1]

function isObjectLike(value) {

复制代码

return value != null && typeof value == 'object';

复制代码

}

复制代码

[h1]5、getRawType：获取数据类型，返回结果为 Number、String、Object、Array等[/h1]

function getRawType(value) {

复制代码

return Object.prototype.toString.call(value).slice(8, -1)

复制代码

}

复制代码

//getoRawType([]) ==> Array

复制代码

[h1]6、isPlainObject：判断数据是不是Object类型的数据[/h1]

function isPlainObject(obj) {

复制代码

return Object.prototype.toString.call(obj) === '[object Object]'

复制代码

}

复制代码

[h1]7、isArray：判断数据是不是数组类型的数据[/h1]

function isArray(arr) {

复制代码

return Object.prototype.toString.call(arr) === '[object Array]'

复制代码

}

复制代码

将isArray挂载到Array上

Array.isArray = Array.isArray || isArray;

复制代码

[h1]8、isRegExp：判断数据是不是正则对象[/h1]

function isRegExp(value) {

复制代码

return Object.prototype.toString.call(value) === '[object RegExp]'

复制代码

}

复制代码

[h1]9、isDate：判断数据是不是时间对象[/h1]

function isDate(value) {

复制代码

return Object.prototype.toString.call(value) === '[object Date]'

复制代码

}

复制代码

[h1]10、isNative：判断 value 是不是浏览器内置函数[/h1]内置函数toString后的主体代码块为 [native code] ，而非内置函数则为相关代码，所以非内置函数可以进行拷贝(toString后掐头去尾再由Function转)

function isNative(value) {

复制代码

return typeof value === 'function' && /native code/.test(value.toString())

复制代码

}

复制代码

[h1]11、isFunction：检查 value 是不是函数[/h1]

function isFunction(value) {

复制代码

return Object.prototype.toString.call(value) === '[object Function]'

复制代码

}

复制代码

[h1]12、isLength：检查 value 是否为有效的类数组长度[/h1]

function isLength(value) {

复制代码

return typeof value == 'number' && value > -1 && value % 1 == 0 && value abCdEf

复制代码

//使用记忆函数

复制代码

let _camelize = cached(camelize)

复制代码

[h1]17、hyphenate：驼峰命名转横线命名：拆分字符串，使用 - 相连，并且转换为小写[/h1]

let hyphenateRE = /\B([A-Z])/g;

复制代码

function hyphenate(str){

复制代码

return str.replace(hyphenateRE, '-$1').toLowerCase()

复制代码

}

复制代码

//abCd ==> ab-cd

复制代码

//使用记忆函数

复制代码

let _hyphenate = cached(hyphenate);

复制代码

[h1]18、capitalize：字符串首位大写[/h1]

function capitalize(str){

复制代码

return str.charAt(0).toUpperCase() + str.slice(1)

复制代码

}

复制代码

// abc ==> Abc

复制代码

//使用记忆函数

复制代码

let _capitalize = cached(capitalize)

复制代码

[h1]19、extend：将属性混合到目标对象中[/h1]

function extend(to, _from) {

复制代码

for(let key in _from) {

复制代码

to[key] = _from[key];

复制代码

}

复制代码

return to

复制代码

}

复制代码

[h1]20、Object.assign：对象属性复制，浅拷贝[/h1]

Object.assign = Object.assign || function(){

复制代码

if(arguments.length == 0) throw new TypeError('Cannot convert undefined or null to object');

复制代码

let target = arguments[0],

复制代码

args = Array.prototype.slice.call(arguments, 1),

复制代码

key

复制代码

args.forEach(function(item){

复制代码

for(key in item){

复制代码

item.hasOwnProperty(key) && ( target[key] = item[key] )

复制代码

}

复制代码

})

复制代码

return target

复制代码

}

复制代码

使用Object.assign可以浅克隆一个对象：

let clone = Object.assign({}, target)

复制代码

简单的深克隆可以使用JSON.parse()和JSON.stringify()，这两个api是解析json数据的，所以只能解析除symbol外的原始类型及数组和对象

let clone = JSON.parse( JSON.stringify(target) )

复制代码

[h1]21、clone：克隆数据，可深度克隆[/h1]这里列出了原始类型，时间、正则、错误、数组、对象的克隆规则，其他的可自行补充

function clone(value, deep){

复制代码

if(isPrimitive(value)){

复制代码

return value

复制代码

}

复制代码

if (isArrayLike(value)) { //是类数组

复制代码

value = Array.prototype.slice.call(value)

复制代码

return value.map(item => deep ? clone(item, deep) : item)

复制代码

}else if(isPlainObject(value)){ //是对象

复制代码

let target = {}, key;

复制代码

for (key in value) {

复制代码

value.hasOwnProperty(key) && ( target[key] = deep ? clone(value[key], deep) : value[key] )

复制代码

}

复制代码

}

复制代码

let type = getRawType(value)

复制代码

switch(type){

复制代码

case 'Date':

复制代码

case 'RegExp':

复制代码

case 'Error': value = new window[type](value); break;

复制代码

}

复制代码

return value

复制代码

}

复制代码

[h1]22、识别各种浏览器及平台[/h1]

//运行环境是浏览器

复制代码

let inBrowser = typeof window !== 'undefined';

复制代码

//运行环境是微信

复制代码

let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;

复制代码

let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();

复制代码

//浏览器 UA 判断

复制代码

let UA = inBrowser && window.navigator.userAgent.toLowerCase();

复制代码

let isIE = UA && /msie|trident/.test(UA);

复制代码

let isIE9 = UA && UA.indexOf('msie 9.0') > 0;

复制代码

let isEdge = UA && UA.indexOf('edge/') > 0;

复制代码

let isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android');

复制代码

let isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios');

复制代码

let isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;

复制代码

[h1]23、getExplorerInfo：获取浏览器信息[/h1]

function getExplorerInfo() {

复制代码

let t = navigator.userAgent.toLowerCase();

复制代码

return 0 = 1;

复制代码

}

复制代码

return res

复制代码

};

复制代码

//repeat('123',3) ==> 123123123

复制代码

[h1]28、dateFormater：格式化时间[/h1]

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.substr(2,2))

复制代码

.replace(/MM/g,(M 2019年06月26日

复制代码

// dateStrForma('2019年06月26日', 'YYYY年MM月DD日', 'YYYYMMDD') ==> 20190626

复制代码

[/code][code]// 一般的也可以使用正则来实现

复制代码

//'2019年06月26日'.replace(/(\d{4})年(\d{2})月(\d{2})日/, '$1-$2-$3') ==> 2019-06-26

复制代码

[h1]30、getPropByPath：根据字符串路径获取对象属性 : 'obj[0].count'[/h1]

function getPropByPath(obj, path, strict) {

复制代码

let tempObj = obj;

复制代码

path = path.replace(/\[(\w+)\]/g, '.$1'); //将[0]转化为.0

复制代码

path = path.replace(/^\./, ''); //去除开头的.

复制代码

[/code][code] let keyArr = path.split('.'); //根据.切割

复制代码

let i = 0;

复制代码

for (let len = keyArr.length; i < len - 1; ++i) {

复制代码

if (!tempObj && !strict) break;

复制代码

let key = keyArr[i];

复制代码

if (key in tempObj) {

复制代码

tempObj = tempObj[key];

复制代码

} else {

复制代码

if (strict) {//开启严格模式，没找到对应key值，抛出错误

复制代码

throw new Error('please transfer a valid prop path to form item!');

复制代码

}

复制代码

break;

复制代码

}

复制代码

}

复制代码

return {

复制代码

o: tempObj, //原始数据

复制代码

k: keyArr[i], //key值

复制代码

v: tempObj ? tempObj[keyArr[i]] : null // key值对应的值

复制代码

};

复制代码

};

复制代码

[h1]31、GetUrlParam：获取Url参数，返回一个对象[/h1]

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"}

复制代码

[h1]32、downloadFile：base64数据导出文件，文件下载[/h1]

function downloadFile(filename, data){

复制代码

let DownloadLink = document.createElement('a');

复制代码

[/code][code] if ( DownloadLink ){

复制代码

document.body.appendChild(DownloadLink);

复制代码

DownloadLink.style = 'display: none';

复制代码

DownloadLink.download = filename;

复制代码

DownloadLink.href = data;

复制代码

[/code][code] if ( document.createEvent ){

复制代码

let DownloadEvt = document.createEvent('MouseEvents');

复制代码

[/code][code] DownloadEvt.initEvent('click', true, false);

复制代码

DownloadLink.dispatchEvent(DownloadEvt);

复制代码

}

复制代码

else if ( document.createEventObject )

复制代码

DownloadLink.fireEvent('onclick');

复制代码

else if (typeof DownloadLink.onclick == 'function' )

复制代码

DownloadLink.onclick();

复制代码

[/code][code] document.body.removeChild(DownloadLink);

复制代码

}

复制代码

}

复制代码

[h1]33、toFullScreen：全屏[/h1]

function toFullScreen(){

复制代码

let elem = document.body;

复制代码

elem.webkitRequestFullScreen

复制代码

? elem.webkitRequestFullScreen()

复制代码

: elem.mozRequestFullScreen

复制代码

? elem.mozRequestFullScreen()

复制代码

: elem.msRequestFullscreen

复制代码

? elem.msRequestFullscreen()

复制代码

: elem.requestFullScreen

复制代码

? elem.requestFullScreen()

复制代码

: alert("浏览器不支持全屏");

复制代码

}

复制代码

[h1]34、exitFullscreen：退出全屏[/h1]

function exitFullscreen(){

复制代码

let elem = parent.document;

复制代码

elem.webkitCancelFullScreen

复制代码

? elem.webkitCancelFullScreen()

复制代码

: elem.mozCancelFullScreen

复制代码

? elem.mozCancelFullScreen()

复制代码

: elem.cancelFullScreen

复制代码

? elem.cancelFullScreen()

复制代码

: elem.msExitFullscreen

复制代码

? elem.msExitFullscreen()

复制代码

: elem.exitFullscreen

复制代码

? elem.exitFullscreen()

复制代码

: alert("切换失败,可尝试Esc退出");

复制代码

}

复制代码

[h1]35、requestAnimationFrame：window动画[/h1]

window.requestAnimationFrame = window.requestAnimationFrame ||

复制代码

window.webkitRequestAnimationFrame ||

复制代码

window.mozRequestAnimationFrame ||

复制代码

window.msRequestAnimationFrame ||

复制代码

window.oRequestAnimationFrame ||

复制代码

function (callback) {

复制代码

//为了使setTimteout的尽可能的接近每秒60帧的效果

复制代码

window.setTimeout(callback, 1000 / 60);

复制代码

};

复制代码

window.cancelAnimationFrame = window.cancelAnimationFrame ||

复制代码

Window.webkitCancelAnimationFrame ||

复制代码

window.mozCancelAnimationFrame ||

复制代码

window.msCancelAnimationFrame ||

复制代码

window.oCancelAnimationFrame ||

复制代码

function (id) {

复制代码

//为了使setTimteout的尽可能的接近每秒60帧的效果

复制代码

window.clearTimeout(id);

复制代码

}

复制代码

[h1]36、_isNaN：检查数据是否是非数字值[/h1]原生的isNaN会把参数转换成数字(valueof)，而null、true、false以及长度小于等于1的数组(元素为非NaN数据)会被转换成数字，这不是我想要的。Symbol类型的数据不具有valueof接口，所以isNaN会抛出错误，这里放在后面，可避免错误

function _isNaN(v){

复制代码

return !(typeof v === 'string' || typeof v === 'number') || isNaN(v)

复制代码

}

复制代码

[h1]37、max：求取数组中非NaN数据中的最大值[/h1]

function max(arr){

复制代码

arr = arr.filter(item => !_isNaN(item))

复制代码

return arr.length ? Math.max.apply(null, arr) : undefined

复制代码

}

复制代码

//max([1, 2, '11', null, 'fdf', []]) ==> 11

复制代码

[h1]38、min：求取数组中非NaN数据中的最小值[/h1]

function min(arr){

复制代码

arr = arr.filter(item => !_isNaN(item))

复制代码

return arr.length ? Math.min.apply(null, arr) : undefined

复制代码

}

复制代码

//min([1, 2, '11', null, 'fdf', []]) ==> 1

复制代码

[h1]39、random：返回一个lower - upper之间的随机数[/h1]lower、upper无论正负与大小，但必须是非NaN的数据

function random(lower, upper){

复制代码

lower = +lower || 0

复制代码

upper = +upper || 0

复制代码

return Math.random() * (upper - lower) + lower;

复制代码

}

复制代码

//random(0, 0.5) ==> 0.3567039135734613

复制代码

//random(2, 1) ===> 1.6718418553475423

复制代码

//random(-2, -1) ==> -1.4474325452361945

复制代码

[h1]40、Object.keys：返回一个由一个给定对象的自身可枚举属性组成的数组[/h1]

Object.keys = Object.keys || function keys(object) {

复制代码

if(object === null || object === undefined){

复制代码

throw new TypeError('Cannot convert undefined or null to object');

复制代码

}

复制代码

let result = []

复制代码

if(isArrayLike(object) || isPlainObject(object)){

复制代码

for (let key in object) {

复制代码

object.hasOwnProperty(key) && ( result.push(key) )

复制代码

}

复制代码

}

复制代码

return result

复制代码

}

复制代码

[h1]41、Object.values：返回一个给定对象自身的所有可枚举属性值的数组[/h1]

Object.values = Object.values || function values(object) {

复制代码

if(object === null || object === undefined){

复制代码

throw new TypeError('Cannot convert undefined or null to object');

复制代码

}

复制代码

let result = []

复制代码

if(isArrayLike(object) || isPlainObject(object)){

复制代码

for (let key in object) {

复制代码

object.hasOwnProperty(key) && ( result.push(object[key]) )

复制代码

}

复制代码

}

复制代码

return result

复制代码

}

复制代码

[h1]42、arr.fill：使用 value 值来填充 array，从start位置开始, 到end位置结束（但不包含end位置），返回原数组[/h1]

Array.prototype.fill = Array.prototype.fill || function fill(value, start, end) {

复制代码

let ctx = this

复制代码

let length = ctx.length;

复制代码

start = parseInt(start)

复制代码

if(isNaN(start)){

复制代码

start = 0

复制代码

}else if (start < 0) {

复制代码

start = -start > length ? 0 : (length + start);

复制代码

}

复制代码

end = parseInt(end)

复制代码

if(isNaN(end) || end > length){

复制代码

end = length

复制代码

}else if (end < 0) {

复制代码

end += length;

复制代码

}

复制代码

while (start < end) {

复制代码

ctx[start++] = value;

复制代码

}

复制代码

return ctx;

复制代码

}

复制代码

//Array(3).fill(2) ===> [2, 2, 2]

复制代码

[h1]43、arr.includes：用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false，可指定开始查询的位置[/h1]

Array.prototype.includes = Array.prototype.includes || function includes(value, start){

复制代码

let ctx = this

复制代码

let length = ctx.length;

复制代码

start = parseInt(start)

复制代码

if(isNaN(start)){

复制代码

start = 0

复制代码

}else if (start < 0) {

复制代码

start = -start > length ? 0 : (length + start);

复制代码

}

复制代码

let index = ctx.indexOf(value)

复制代码

return index >= start;

复制代码

}

复制代码

[h1]44、arr.find：返回数组中通过测试（函数fn内判断）的第一个元素的值[/h1]

Array.prototype.find = Array.prototype.find || function find(fn, ctx){

复制代码

ctx = ctx || this

复制代码

let result;

复制代码

ctx.some((value, index, arr), thisValue) => {

复制代码

return fn(value, index, arr) ? (result = value, true) : false

复制代码

})

复制代码

return result

复制代码

}

复制代码

[h1]45、arr.findIndex ：返回数组中通过测试（函数fn内判断）的第一个元素的下标[/h1]

Array.prototype.findIndex = Array.prototype.findIndex || function findIndex(fn, ctx){

复制代码

ctx = ctx || this

复制代码

let result;

复制代码

ctx.some((value, index, arr), thisValue) => {

复制代码

return fn(value, index, arr) ? (result = index, true) : false

复制代码

})

复制代码

return result

复制代码

}

复制代码

[h1]46、performance.timing：利用performance.timing进行性能分析[/h1]

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))

复制代码

[/code][code] if(t = performance.memory){

复制代码

console.log('js内存使用占比：' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')

复制代码

}

复制代码

})

复制代码

}

复制代码

[h1]47、禁止某些键盘事件[/h1]

document.addEventListener('keydown', function(event){

复制代码

return !(

复制代码

112 == event.keyCode || //F1

复制代码

123 == event.keyCode || //F12

复制代码

event.ctrlKey && 82 == event.keyCode || //ctrl + R

复制代码

event.ctrlKey && 78 == event.keyCode || //ctrl + N

复制代码

event.shiftKey && 121 == event.keyCode || //shift + F10

复制代码

event.altKey && 115 == event.keyCode || //alt + F4

复制代码

"A" == event.srcElement.tagName && event.shiftKey //shift + 点击a标签

复制代码

) || (event.returnValue = false)

复制代码

});

复制代码

[h1]48、禁止右键、选择、复制[/h1]

['contextmenu', 'selectstart', 'copy'].forEach(function(ev){

复制代码

document.addEventListener(ev, function(event){

复制代码

return event.returnValue = false

复制代码

})

复制代码

});

复制代码

end -

用心分享一起成长做有温度的攻城狮
每天记得对自己说：你是最棒的！

好文阅读：
趋势：TypeScript - 一种思维方式
即日起 TypeScript —— 面向编辑器编程
该如何以正确的姿势插入SVG Sprites？
详解三次握手和四次挥手 — 遇到心动的女孩时，如何去把握？
单点登录该如何实现？

20 个让你效率更高的 CSS 代码技巧

如何写出让同事无法维护的代码？

零基础的小明要如何成为前端工程师？

都看到这里了，给个“在看”再走呗～