JavaScript can do a lot of great things. This article organizes 50+ practical tool functions for you to help you improve your work efficiency and help debug your code. 1. isStatic: Check whether the data is original data except symbol. function isStatic(value) { return ( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined' || value === null ) } 2. isPrimitive: Check whether the data is primitive data function isPrimitive(value) { return isStatic(value) || typeof value === 'symbol' } 3. isObject: Determine whether the data is a reference type data (for example: array, function, object, regexe, new Number(), new String()) function isObject(value) { let type = typeof value; return value != null && (type == 'object' || type == 'function'); } 4. isObjectLike: Checks whether value is a class object. If a value is of class object, then it should not be null and the result after typeof is "object". function isObjectLike(value) { return value != null && typeof value == 'object'; } 5. getRawType: Get the data type, and the returned result is Number, String, Object, Array, etc. function getRawType(value) { return Object.prototype.toString.call(value).slice(8, -1) } // getoRawType([]) ⇒ Array 6. isPlainObject: Determine whether the data is of Object type function isPlainObject(obj) { return Object.prototype.toString.call(obj) === '[object Object]' } 7. isArray: Determine whether the data is an array type (compatible writing of Array.isArray) function isArray(arr) { return Object.prototype.toString.call(arr) === '[object Array]' } //Mount isArray onto ArrayArray.isArray = Array.isArray || isArray; 8. isRegExp: Determine whether the data is a regular object function isRegExp(value) { return Object.prototype.toString.call(value) === '[object RegExp]' } 9. isDate: Determine whether the data is a time object function isDate(value) { return Object.prototype.toString.call(value) === '[object Date]' } 10. isNative: Determine whether the value is a built-in function of the browser The main code block after the built-in function toString is [native code], while the non-built-in function is related code, so non-built-in functions can be copied (after toString, the head and tail are cut off and then converted from Function) function isNative(value) { return typeof value === 'function' && /native code/.test(value.toString()) } 11. isFunction: Check if value is a function function isFunction(value) { return Object.prototype.toString.call(value) === '[object Function]' } 12. isLength: Checks whether value is a valid array-like length function isLength(value) { return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= Number.MAX_SAFE_INTEGER; } 13. isArrayLike: Check if value is an array-like If a value is considered array-like, it is not a function, and value.length is an integer greater than or equal to 0 and less than or equal to Number.MAX_SAFE_INTEGER. Here strings are also treated as array-like. function isArrayLike(value) { return value != null && isLength(value.length) && !isFunction(value); } 14. isEmpty: Check if value is empty If it is null, return true directly; if it is an array-like object, determine the data length; if it is an Object object, determine whether it has attributes; if it is other data, return false directly (you can also return true instead) function isEmpty(value) { if (value == null) { return true; } if (isArrayLike(value)) { return !value.length; } else if (isPlainObject(value)) { for (let key in value) { if (hasOwnProperty.call(value, key)) { return false; } } } return false; } 15. cached: memory function: cache function calculation results function cached(fn) { let cache = Object.create(null); return function cachedFn(str) { let hit = cache[str]; return hit || (cache[str] = fn(str)) } } 16. camelize: convert horizontal lines to camel case let camelizeRE = /-(\w)/g; function camelize(str) { return str.replace(camelizeRE, function(_, c) { return c ? c.toUpperCase() : ''; }) } //ab-cd-ef ==> abCdEf //Use the memory function let _camelize = cached(camelize) 17. hyphenate: convert camel case naming to hyphenated naming: split the string, connect it with -, and convert it to lowercase let hyphenateRE = /\B([AZ])/g; function hyphenate(str){ return str.replace(hyphenateRE, '-$1').toLowerCase() } //abCd ==> ab-cd //Using the memoized function let _hyphenate = cached(hyphenate); 18. capitalize: capitalize the first character of a string function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1) } //abc ==> Abc //Using the memoized function let _capitalize = cached(capitalize) 19. extend: mix attributes into the target object function extend(to, _form) { for(let key in _form) { to[key] = _form[key]; } return to } 20. Object.assign: object property copy, shallow copy 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 } Use Object.assign to clone an object: let clone = Object.assign({}, target); Simple deep cloning can use JSON.parse() and JSON.stringify(). These two APIs parse JSON data, so they can only parse primitive types, arrays, and objects except symbols. let clone = JSON.parse( JSON.stringify(target) ) 21. clone: clone data, deep cloning is possible Here are the cloning rules for primitive types, time, regular, error, array, and object. Others can be added by yourself function clone(value, deep) { if (isPrimitive(value)) { return value } if (isArrayLike(value)) { // is an array-like value = Array.prototype.slice.call(vall) return value.map(item => deep ? clone(item, deep) : item) } else if (isPlainObject(value)) { //is an object let target = {}, key; for (key in value) { value.hasOwnProperty(key) && ( target[key] = deep ? clone(value[key], value[key] )) } } let type = getRawType(value); switch(type) { case 'Date': case 'RegExp': case 'Error': value = new window[type](value); break; } return value } 22. Identify various browsers and platforms //The operating environment is the browser let inBrowser = typeof window !== 'undefined'; //The operating environment is WeChat let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform; let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase(); //Browser UA judgment 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; 23. getExplorerInfo: Get browser information function getExplorerInfo() { let t = navigator.userAgent.toLowerCase(); return 0 <= t.indexOf("msie") ? { //ie < 11 type: "IE", version: Number(t.match(/msie ([\d]+)/)[1]) } : !!t.match(/trident\/.+?rv:(([\d.]+))/) ? { // ie 11 type: "IE", version: 11 } : 0 <= t.indexOf("edge") ? { type: "Edge", version: Number(t.match(/edge\/([\d]+)/)[1]) } : 0 <= t.indexOf("firefox") ? { type: "Firefox", version: Number(t.match(/firefox\/([\d]+)/)[1]) } : 0 <= t.indexOf("chrome") ? { type: "Chrome", version: Number(t.match(/chrome\/([\d]+)/)[1]) } : 0 <= t.indexOf("opera") ? { type: "Opera", version: Number(t.match(/opera.([\d]+)/)[1]) } : 0 <= t.indexOf("Safari") ? { type: "Safari", version: Number(t.match(/version\/([\d]+)/)[1]) } : { type: t, version: -1 } } 24. isPCBroswer: Check whether it is PC browser mode function isPCBroswer() { let e = navigator.userAgent.toLowerCase() , t = "ipad" == e.match(/ipad/i) , i = "iphone" == e.match(/iphone/i) , r = "midp" == e.match(/midp/i) , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i) , a = "ucweb" == e.match(/ucweb/i) , o = "android" == e.match(/android/i) , s = "windows ce" == e.match(/windows ce/i) , l = "windows mobile" == e.match(/windows mobile/i); return !(t || i || r || n || a || o || s || l) } 25. unique: Remove duplicates from an array and return a new array function unique(arr){ if(!isArrayLink(arr)){ //not an array-like object return arr } let result = [] let objarr = [] let obj = Object.create(null) arr.forEach(item => { if(isStatic(item)){//It is the raw data except symbol let key = item + '_' + getRawType(item); if(!obj[key]){ obj[key] = true result.push(item) } }else{//reference type and symbol if (!objarr.includes(item)){ objarr.push(item) result.push(item) } } }) return result } 26. Simple implementation of Set window.Set = window.Set || (function () { function Set(arr) { this.items = arr ? unique(arr) : []; this.size = this.items.length; // Array size} Set.prototype = { add: function (value) { // Add an element. If the element already exists, skip it and return the Set structure itself. if (!this.has(value)) { this.items.push(value); this.size++; } return this; }, clear: function () { // Clear all members, no return value. this.items = [] this.size = 0 }, delete: function (value) { //Delete a value and return a Boolean value to indicate whether the deletion is successful. return this.items.some((v, i) => { if(v === value){ this.items.splice(i,1) return true } return false }) }, has: function (value) { //Returns a Boolean value indicating whether the value is a member of the Set. return this.items.some(v => v === value) }, values: function () { return this.items }, } return Set; }()); 27. repeat: Generate a repeated string consisting of n str, which can be modified to fill an array, etc. function repeat(str, n) { let res = ''; while(n) { if(n % 2 === 1) { res += str; } if(n > 1) { str += str; } n >>= 1; } return res }; //repeat('123',3) ==> 123123123 28. dateFormater: format time 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<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) } // dateFormater('YYYY-MM-DD HH:mm', t) ==> 2019-06-26 18:30 // dateFormater('YYYYMMDDHHmm', t) ==> 201906261830 29. dateStrForma: Converts a specified string from one time format to another. The format of From should correspond to the position of str function dateStrForma(str, from, to){ //'20190626' 'YYYYMMDD' 'YYYY year MM month DD day' str += '' let Y = '' if(~(Y = from.indexOf('YYYY'))){ Y = str.substr(Y, 4) to = to.replace(/YYYY|yyyy/g,Y) }else if(~(Y = from.indexOf('YY'))){ Y = str.substr(Y, 2) to = to.replace(/YY|yy/g,Y) } let k,i ['M','D','H','h','m','s'].forEach(s => { i = from.indexOf(s+s) k = ~i ? str.substr(i, 2) : '' to = to.replace(s+s, k) }) return to } // dateStrForma('20190626', 'YYYYMMDD', 'YYYY year MM month DD day') ==> June 26, 2019 // dateStrForma('121220190626', '----YYYYMMDD', 'YYYY year MM month DD day') ==> June 26, 2019 // dateStrForma('20190626', 'YYYY year MM month DD day', 'YYYYMMDD') ==> 20190626 // You can also use regular expressions to achieve this //'2019-06-26'.replace(/(\d{4})year(\d{2})month(\d{2})day/, '$1-$2-$3') ==> 2019-06-26 30. getPropByPath: Get object properties based on string path: 'obj[0].count' function getPropByPath(obj, path, strict) { let tempObj = obj; path = path.replace(/\[(\w+)\]/g, '.$1'); //Convert [0] to .0 path = path.replace(/^\./, ''); //Remove the leading . let keyArr = path.split('.'); // Cut according to . 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) {//Turn on strict mode, no corresponding key value found, throw an error throw new Error('please transfer a valid prop path to form item!'); } break; } } return { o: tempObj, //original data k: keyArr[i], //key value v: tempObj ? tempObj[keyArr[i]] : null //value corresponding to the key value}; }; 31. GetUrlParam: Get the Url parameter and return an object 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"} 32. downloadFile: base64 data export file, file download 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); } } 33. toFullScreen: Full screen function toFullScreen() { let elem = document.body; elem.webkitRequestFullScreen ? elem.webkitRequestFullScreen() : elem.mozRequestFullScreen ? elem.mozRequestFullScreen() : elem.msRequestFullscreen ? elem.msRequestFullscreen() : elem.requestFullScreen ? elem.requestFullScreen() : alert("The browser does not support full screen"); } 34. exitFullscreen: exit full screen 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("Switch failed, try to exit by pressing Esc"); } 35. requestAnimationFrame: window animation window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { //In order to make setTimeout as close to 60 frames per second as possible, window.setTimeout(callback, 1000 / 60); } window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame || function (id) { //In order to make setTimeout as close to 60 frames per second as possible window.clearTimeout(id); } 36. _isNaN: Checks whether the data is a non-numeric value function _isNaN(v){ return !(typeof v === 'string' || typeof v === 'number') || isNaN(v) } 37. max: Find the maximum value of non-NaN data in an array 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 38. min: Find the minimum value of non-NaN data in an array 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 39. random: Returns a lower-upper random number. (lower and upper can be positive or negative, large or small, but must be non-NaN data) 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 40. Object.keys: Returns an array of enumerable properties of a given object 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; } 41. Object.values: Returns an array of all enumerable property values of a given object 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; } 42. arr.fill: Fills array with value, starting from the start position and ending at the end position (but not including the end position), and returns the original array 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] 43. arr.includes: used to determine whether an array contains a specified value. If so, it returns true, otherwise it returns false. You can specify the position to start the query 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; } 44. Return the value of the first element in the array that passes the test (judgment in function fn) 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 } 45. arr.findIndex: Returns the index of the first element in the array that passes the test (judged in the function fn) 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 } 46. performance.timing: Performance analysis using performance.timing window.onload = function() { setTimeout(function() { let t = performance.timing; console.log('DNS query time:' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0)) console.log('TCP connection time:' + (t.connectEnd - t.connectStart).toFixed(0)) console.log('request request time:' + (t.responseEnd - t.responseStart).toFixed(0)) console.log('Time spent parsing the DOM tree:' + (t.domComplete - t.domInteractive).toFixed(0)) console.log('White screen time:' + (t.responseStart - t.navigationStart).toFixed(0)) console.log('domready time: ' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0)) console.log('onload time: ' + (t.loadEventEnd - t.navigationStart).toFixed(0)) if (t = performance.memory) { console.log('js memory usage percentage:' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%') } }) } 47. Disable certain keyboard events document.addEventListener('keydown', function(event) { return !( 112 == event.keyCode || //Disable F1 123 == event.keyCode || //Disable F12 event.ctrlKey && 82 == event.keyCode || //Disable ctrl+R event.ctrlKey && 18 == event.keyCode || //Disable ctrl+N event.shiftKey && 121 == event.keyCode || //Disable shift+F10 event.altKey && 115 == event.keyCode || //Disable alt+F4 "A" == event.srcElement.tagName && event.shiftKey //Disable shift+click on tag a) || (event.returnValue = false) }); 48. Disable right click, selection, and copy ['contextmenu', 'selectstart', 'copy'].forEach(function(ev) { document.addEventListener(ev, function(event) { return event.returnValue = false; }) }); 49. numAdd - Calculates the addition of numbers function numAdd(num1, num2) { let baseNum, baseNum1, baseNum2; try { baseNum1 = num1.toString().split(".")[1].length; } catch (e) { baseNum1 = 0; } try { baseNum2 = num2.toString().split(".")[1].length; } catch (e) { baseNum2 = 0; } baseNum = Math.pow(10, Math.max(baseNum1, baseNum2)); return (num1 * baseNum + num2 * baseNum) / baseNum; }; 50. numSub - - Calculate the subtraction of numbers function numSub(num1, num2) { let baseNum, baseNum1, baseNum2; let precision; // precision try { baseNum1 = num1.toString().split(".")[1].length; } catch (e) { baseNum1 = 0; } try { baseNum2 = num2.toString().split(".")[1].length; } catch (e) { baseNum2 = 0; } baseNum = Math.pow(10, Math.max(baseNum1, baseNum2)); precision = (baseNum1 >= baseNum2) ? baseNum1 : baseNum2; return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision); }; 51. numMulti - - Calculates the multiplication of numbers function numMulti(num1, num2) { let baseNum = 0; try { baseNum += num1.toString().split(".")[1].length; } catch (e) { } try { baseNum += num2.toString().split(".")[1].length; } catch (e) { } return Number(num1.toString().replace(".", "")) * Number(num2.toString().replace(".", "")) / Math.pow(10, baseNum); }; 52. numDiv - - Calculates the division of numbers function numDiv(num1, num2) { let baseNum1 = 0, baseNum2 = 0; let baseNum3, baseNum4; try { baseNum1 = num1.toString().split(".")[1].length; } catch (e) { baseNum1 = 0; } try { baseNum2 = num2.toString().split(".")[1].length; } catch (e) { baseNum2 = 0; } with (Math) { baseNum3 = Number(num1.toString().replace(".", "")); baseNum4 = Number(num2.toString().replace(".", "")); return (baseNum3 / baseNum4) * pow(10, baseNum2 - baseNum1); } }; This concludes this article about the summary of 50+ practical tool functions in JavaScript. For more relevant JavaScript practical tool function content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: How to implement cross-domain API proxy forwarding through Nginx proxy forwarding configuration
>>: MySQL slow query optimization: the advantages of limit from theory and practice
1. parseFloat() function Make a simple calculator...
Introduction to Swap Swap (i.e. swap partition) i...
Table of contents What happens if a piece of code...
<br />Since the Ministry of Foreign Affairs ...
Use JS to implement a random roll call system for...
Preface I recently made a fireworks animation, wh...
Table of contents 1. Vue Overview Vue official we...
MySQL software installation and database basics a...
How to solve VMware workstation virtual machine c...
This article shares the specific code of the WeCh...
Here are two terminal split screen tools: screen ...
Step 1: Install Stow In this example, we are usin...
Vertical table Vertical table splitting means spl...
If you directly set the width attribute to the sty...
Now many people are joining the ranks of website ...