1. Isstatic: Test whether the data is the 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 if the data isPrimitive
function isPrimitive(value) {
return isStatic(value) || typeof value === 'symbol'
}3, isObject: whether the data is a reference type of data (for example, array, function, object, regexe, new Number (), the new String ())
function isObject(value) { let type = typeof value; return value ! = null && (type == 'object' || type == 'function'); }4, IsObjectLike: Check if Value is a class object. If a value is a class object, it should not be null, and the result after typeof is “object.”
function isObjectLike(value) { return value ! = null && typeof value == 'object'; }5, getRawType: get data type, return results of Number, String, Object, Array, etc
The function getRawType (value) {return Object. The prototype. ToString. Call (value). Slice (8, 1)} / / getoRawType ([]) ⇒ Array6, IsPlainObject: determine whether the data is of type Object
function isPlainObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]'
}7, IsArray: Check if the data is of Array type (Array.isArray compatible)
Function isArray (arr) {return Object. The prototype. ToString. Call (arr) = = = '[Object Array]'} / / will isArray mounted to the Array Array.isArray = Array.isArray || isArray;8. ISRegexp: Determined if 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]'
}The main code block after the built-in Function toString is [native code], while the non-built-in Function is related code, so the non-built-in Function can be copied. (After toString, turn to 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 if value is a valid class array length
function isLength(value) {
return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= Number.MAX_SAFE_INTEGER;
}If a value is considered to be a class array, then it is not a function, and value.length is an integer, greater than or equal to 0, less than or equal to Number.max_safe_integer. Here strings are also treated as class arrays.
function isArrayLike(value) { return value ! = null && isLength(value.length) && ! isFunction(value); }14, isEmpty: check if value isEmpty. If it is null, return true; If it is a class array, determine the length of the data; If it is an Object, determine whether it has an attribute; Returns false for other data (or true)
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; }Cached: Memory function: Caches the results of the operation of the function
function cached(fn) {
let cache = Object.create(null);
return function cachedFn(str) {
let hit = cache[str];
return hit || (cache[str] = fn(str))
}
}16, Camelize: horizontal line to hump named
let camelizeRE = /-(\w)/g; function camelize(str) { return str.replace(camelizeRE, function(_, c) { return c ? c.toUpperCase() : ''; })} //ab-cd-ef ==> abCdEf // Let _camelize = cached(camelize)Hyphenate: Split strings, concatenate them with -, and convert them to lowercase
let hyphenateRE = /\B([A-Z])/g; function hyphenate(str){ return str.replace(hyphenateRE, // let _hyphenate = cached(hyphenate); // let _hyphenate = cached(hyphenate);18. Capitalize the first capitalize of the string
Function capitalize(STR) {return capitalize(0).toupPerCase () + capitalize(1) cached(capitalize)19. Extend: Blends attributes into the target object
function extend(to, _form) {
for(let key in _form) {
to[key] = _form[key];
}
return to
}20, Object. Assign: Shallow copy of Object attributes
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);A simple deep clone can use JSON.parse() and JSON.stringify(), which parse JSON data, so only primitive types and arrays and objects other than Symbol can be parsed.
let clone = JSON.parse( JSON.stringify(target) )Here is a list of the original type, time, regular, error, array, object cloning rules, the other can be supplemented
function clone(value, Deep) {if (isPrimitive(value)) {return value} if (isArrayLike(value)) Array.prototype.slice.call(vall) 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], 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
// Let inBrowser = typeof window! == 'undefined'; WeChat let inWeex = typeof WXEnvironment! == 'undefined' && !! WXEnvironment.platform; let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase(); / browser/UA judge let UA = inBrowser && window. The 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 in PC browser mode
function isPCBroswer() { let e = navigator.userAgent.toLowerCase() , t = "ipad" == e.match(/ipad/i) , I = = = "iphone" e.m atch (/ iphone/I), r = = = "midp" e.m atch (/ midp/I), n = "rv: 2." = = e.m atch (/ rv: 2. / 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: Undouble the array to return a new array
function unique(arr){ if(! Return arr} let result = [] let objarr = [] let obj = object.create (null) arr.foreach (item) If (isStatic(item)){let key = item + '_' + getRawType(item); if(! Obj [key]){obj[key] = true result.push(item)}}else{if(! objarr.includes(item)){ objarr.push(item) result.push(item) } } }) return resulte }26, Set simple implementation
window.Set = window.Set || (function () { function Set(arr) { this.items = arr ? unique(arr) : []; this.size = this.items.length; } set. prototype = {add: function (value) {// Add an element, and return the Set structure itself. if (! this.has(value)) { this.items.push(value); this.size++; } return this; }, clear: function () {// Clear all members, no value is returned. This.items = [] this.size = 0}, delete: function (value) {return a Boolean value that shows whether the delete was 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 Set. return this.items.some(v => v === value) }, values: function () { return this.items }, } return Set; } ());27. Repeat: Generates a repeating string, consisting of n STRs, which can be modified to fill in 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) ==> 12312312328, DateFormater: Formatting 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). The replace (/ YY/g | YY, Y.s ubstr (2, 2)). The 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) ==> 20190626183029, dateStrForma: Converts the specified string from one time format to another. The format of the FROM corresponds to the location of the STR
function dateStrForma(str, from, If (~(Y = from.indexOf('YYYY'))){Y = STR. (substr('YYYY')); 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', DateStrForma ('121220190626', '----YYYYMMDD') ==> dateStrForma('121220190626', '----YYYYMMDD', 'YYYY MM DD date ') == bb0 06/26 2019 // dateStrForma(' 06/26 2019 ', 'YYYY MM DD date ') == bb0 06/26 2019 'YYYYMMDD') = = > 20190626 / / general can also use regular to implement / / 'on June 26, 2019. The replace ()/(\ d {4}) on (\ d {2})/(\ d {2}),' $1 - $2 - $3) = = > 2019-06-2630, getPropByPath: getPropByPath: getPropByPath: getPropByPath: ‘obj[0].count’
function getPropByPath(obj, path, strict) { let tempObj = obj; path = path.replace(/\[(\w+)\]/g, '.$1'); // Convert [0] to.0 path = path.replace(/^\./, "); Let keyArr = path.split('.'); 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) {// throw new Error(' Please transfer a valid prop path to form item! '); } break; }} return {o: tempObj, k: keyArr[I], v: tempObj? TempObj [keyArr[I]] : null}; };31, getUrlParam: Gets the URL parameter and returns 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(" Browsers do 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 ? EEM.exitFullScreen () : alert(" Switching failed, try Esc exit "); }35, requestAnimationFrame: window animation
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {// 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) { // To make setTimeOut as close as possible to the 60 frames per second effect window.clearTimeout(id); }36, _isNaN: Check if the data is a non-numeric value
function _isNaN(v){ return ! (typeof v === 'string' || typeof v === 'number') || isNaN(v) }37, Max: Gets the maximum value of the non-NaN data in the 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', []]) ==> 1138, min: Gets the minimum value of non-NaN data in the 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', []]) ==> 139, RANDOM: Returns a lower-upper direct random number. Lower and upper 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, 0) ==> 0.3567039135734613 //random(2, 1) ==> 1.6718418553475423 //random(-2, 0) ==> 0.3567039135734613 1) = = > 1.447432545236194540, Object.keys: Returns an array of the 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;
}Object.values Returns an array of enumerable property values for 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: Fill the array with a value starting at start and ending at end (but not including end), and return the 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 if an array contains a specified value. If true or false otherwise, specify where 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, Returns the value of the first element in the array that passes the test
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
}Arr. FindIndex: Returns the index of the first element in the array that passes the test (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: Use Performance. Timing for performance analysis
window.onload = function() { setTimeout(function() { let t = performance.timing; Console. log('DNS query time: '+ (t.domainLookupend - t.domainLookupstart).tofixed (0)) console.log('TCP link time: '+ (t.cornectend -t.cornectstart).tofixed (0)) console.log(' Request time: '+ (t.reflseend-t.reflsestart).tofixed (0)) console.log(' Time taken to parse the DOM tree: '+ (t.domComplete - t.domInteractive).toFixed(0)) console.log(' White screen time: '+ (t.reflsestart - t.navigationstart).tofixed (0)) console.log(' domReady time: '+ (t.d omContentLoadedEventEnd - t.n avigationStart) toFixed (0)) console. The log (' onload time: '+ (t.loadEventEnd-t.avigationStart).tofixed (0)) if (t = performance.memory) {console.log('js memory usage ratio: ' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%') } }) }Disable certain keyboard events
document.addEventListener('keydown', function(event) { return ! (112 = = event. KeyCode | | / / 123 ban on F1 = = event. The keyCode | | / / F12 ban event. CtrlKey && 82 = = event. The keyCode | | / / CTRL + R is prohibited Event. CtrlKey && 18 = = event. The keyCode | | / / prohibited CTRL + N event. ShiftKey && 121 = = event. The keyCode | | / / prohibited shift + F10 event. AltKey && 115 = = event. The keyCode | | / / prohibited Alt + F4 "A" = = event. The srcElement. TagName && event. ShiftKey / / prohibited shift + click on A TAB) | | (event.returnValue = false)});Prohibit right click, select, copy
['contextmenu', 'selectstart', 'copy'].forEach(function(ev) { document.addEventListener(ev, function(event) { return event.returnValue = false; })});49, NumAdd — Calculate the number to add
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 — Calculates the subtraction of numbers
function numSub(num1, num2) { let baseNum, baseNum1, baseNum2; let 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 — Multiply 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); }};