zoukankan      html  css  js  c++  java
  • 常用函数

    常用函数

    1. static: 检测数据是不是除了symbol外的原始数据

    function isStatic(value) {
        return (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined' || value === null)
    } 
    

    2. isPrimitive:检测数据是不是原始数据

    function isPrimitive(value) {
        return isStatic(value) || typeof value === 'symbol'
    }
    

    3. isObject:判断数据是不是引用类型的数据 (例如: arrays, functions, objects, regexes, new Number(0),以及 new String(''))

    function isObject(value) {
        let type = typeof value;
        return value != null && (type == 'object' || type == 'function');
    }
    

    4. isObjectLike: 检查 value 是否是 类对象,如果一个值是类对象,那么它不应该是 null,而且 typeof 后的结果是 "object"

    function isObjectLike(value) {
        return value != null && typeof value == 'object';
    }
    

    5. getRawType:获取数据类型,返回结果为 Number、String、Object、Array等

    function getRawType(value) {    
    	return Object.prototype.toString.call(value).slice(8, -1)
    }//getoRawType([]) ==> Array
    

    6. isPlainObject:判断数据是不是Object类型的数据

    function isPlainObject(obj) {    
    	return Object.prototype.toString.call(obj) === '[object Object]'
    }
    

    7. isArray:判断数据是不是数组类型的数据

    function isArray(arr) {    
    	return Object.prototype.toString.call(arr) === '[object Array]'
    }
    

    将isArray挂载到Array上

    Array.isArray = Array.isArray || isArray;
    

    8. isRegExp:判断数据是不是正则对象

    function isRegExp(value) {    
    	return Object.prototype.toString.call(value) === '[object RegExp]'
    }
    

    9. isDate:判断数据是不是时间对象

    function isDate(value) {    
    	return Object.prototype.toString.call(value) === '[object Date]'
    }
    

    10. isNative:判断 value 是不是浏览器内置函数

    内置函数toString后的主体代码块为 [native code] ,而非内置函数则为相关代码,所以非内置函数可以进行拷贝(toString后掐头去尾再由Function转)

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

    11. isFunction:检查 value 是不是函数

    function isFunction(value) {    
    	return Object.prototype.toString.call(value) === '[object Function]'
    }
    

    12.isLength:检查 value 是否为有效的类数组长度

    function isLength(value) {     
    	return typeof value == 'number' && value > -1 && value % 1 == 0 && value <= Number.MAX_SAFE_INTEGER;
    }
    

    13. isArrayLike:检查 value 是否是类数组

    如果一个值被认为是类数组,那么它不是一个函数,并且value.length是个整数,大于等于 0,小于或等于 Number.MAX_SAFE_INTEGER。这里字符串也将被当作类数组。

    function isArrayLike(value) {      
    	return value != null && isLength(value.length) && !isFunction(value);
    }
    

    14.isEmpty:检查 value 是否为空

    如果是null,直接返回true;如果是类数组,判断数据长度;如果是Object对象,判断是否具有属性;如果是其他数据,直接返回false(也可改为返回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;
    }
    

    15. cached: 记忆函数: 缓存函数的运算结果

    function cached(fn) {    
    	let cache = Object.create(null);    
    	return function cachedFn(str) {        
    		let hit = cache[str];
    		return hit || (cache[str] = fn(str))    
    		}
    }
    

    16. camelize: 横线转驼峰命名

    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)
    

    17. hyphenate:驼峰命名转横线命名: 拆分字符串,使用 - 相连,并且转换为小写

    let hyphenateRE = /B([A-Z])/g;function hyphenate(str) {    	return str.replace(hyphenateRE, '-$1').toLowerCase()
    }//abCd ==> ab-cd//使用记忆函数let _hyphenate = cached(hyphenate);
    

    18.capitalize:字符串首位大写

    function capitalize(str){    
    	return str.charAt(0).toUpperCase() + str.slice(1)
    }
    // abc ==> Abc//使用记忆函数let _capitalize = cached(capitalize)
    

    19. extend:将属性混合到目标对象中

    function extend(to, _from) {   
    	for(let key in _from) {
    		to[key] = _from[key];   
    	}    
    	return to
    }
    

    20. Object.assign: 对象属性复制,浅拷贝

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

    21. clone: 克隆数据,可深度克隆

    这里列出了原始类型,时间、正则、错误、数组、对象的克隆规则,其他的可自行补充

    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
    }
    

    22. 识别各种浏览器及平台

    //运行环境是浏览器
    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;
    

    23. getExplorerInfo: 获取浏览器信息

    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: 检测是否为PC端浏览器模式

    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: 数组去重,返回一个新数组

    function unique(arr) {
        if (!isArrayLink(arr)) { //不是类数组对象        
            return arr
        }
        let result = []
        let objarr = []
        let obj = Object.create(null) arr.forEach(item => {
            if (isStatic(item)) {
                //是除了symbol外的原始数据            
                let key = item + '_' + getRawType(item);
                if (!obj[key]) {
                    obj[key] = true result.push(item)
                }
            } else {
                // 引用类型及symbol            
                if (!objarr.includes(item)) {
                    objarr.push(item) result.push(item)
                }
            }
        }) return resulte
    }
    

    26. Set简单实现

    window.Set = window.Set || (function () {
        function Set(arr) {
            this.items = arr ? unique(arr) : [];
            this.size = this.items.length;
            // Array的大小    
        }
        Set.prototype = {
            add: function (value) { // 添加元素,若元素已存在,则跳过,返回 Set 结构本身。         
                if (!this.has(value)) {
                    this.items.push(value);
                    this.size++;
                }
                return this;
            },
            clear: function () { //清除所有成员,没有返回值。        
                this.items = [] this.size = 0
            },
            delete: function (value) { //删除某个值,返回一个布尔值,表示删除是否成功。            
                return this.items.some((v, i) => {
                    if (v === value) {
                        this.items.splice(i, 1) return true
                    }
                    return false
                })
            },
            has: function (value) {
                //返回一个布尔值,表示该值是否为Set的成员。            
                return this.items.some(v => v === value)
            },
            values: function () {
                return this.items
            },
        }
        return Set;
    }());
    

    27. repeat: 生成一个重复的字符串,有n个str组成,可修改为填充为数组等

    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: 格式化时间

    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: 将指定字符串由一种时间格式转化为另一种

    from的格式应对应str的位置

    function dateStrForma(str, from, to) {
        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
    }
    

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

    function getPropByPath(obj, path, strict) {
        let tempObj = obj;
        path = path.replace(/[(w+)]/g, '.$1');
        //将[0]转化为.0      
        path = path.replace(/^./, '');
        //去除开头的.      
    
    let keyArr = path.split(&#39;.&#39;);
    //根据.切割      
    let i = 0;
    for (let len = keyArr.length; i &lt; len - 1; ++i) {
        if (!tempObj &amp;&amp; !strict) break;
        let key = keyArr[i];
        if (key in tempObj) {
            tempObj = tempObj[key];
        } else {
            if (strict) { //开启严格模式,没找到对应key值,抛出错误                
                throw new Error(&#39;please transfer a valid prop path to form item!&#39;);
            }
            break;
        }
    }
    return {
        o: tempObj, //原始数据        
        k: keyArr[i], //key值        
        v: tempObj ? tempObj[keyArr[i]] : null
        // key值对应的值      
    };
    

    };

    31. GetUrlParam: 获取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"}
    

    32. downloadFile: 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);
        }
    }
    

    33. toFullScreen: 全屏

    function toFullScreen() {
        let elem = document.body;
        elem.webkitRequestFullScreen ? elem.webkitRequestFullScreen() : elem.mozRequestFullScreen ? elem.mozRequestFullScreen() :
            elem.msRequestFullscreen ? elem.msRequestFullscreen() : elem.requestFullScreen ? elem.requestFullScreen() :
            alert("浏览器不支持全屏");
    }
    

    34. exitFullscreen: 退出全屏

    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退出");
    }
    

    35. requestAnimationFrame: window动画

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

    36. _isNaN: 检查数据是否是非数字值

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

    function _isNaN(v){    
        return !(typeof v === 'string' || typeof v === 'number') || isNaN(v)
    }
    

    37. max: 求取数组中非NaN数据中的最大值

    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: 求取数组中非NaN数据中的最小值

    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: 返回一个lower - upper之间的随机数

    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
    

    40. Object.keys: 返回一个由一个给定对象的自身可枚举属性组成的数组

    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: 返回一个给定对象自身的所有可枚举属性值的数组

    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: 使用 value 值来填充 array,从start位置开始, 到end位置结束(但不包含end位置),返回原数组

    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: 用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false,可指定开始查询的位置

    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. arr.find: 返回数组中通过测试(函数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 : 返回数组中通过测试(函数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.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) + '%')
            }
        })
    }
    

    47. 禁止某些键盘事件

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

    48. 禁止右键、选择、复制

    ['contextmenu', 'selectstart', 'copy'].forEach(function (ev) {
        document.addEventListener(ev, function (event) {
            return event.returnValue = false
        })
    });
    

    49. 防抖节流函数

    // TODO 防抖函数
    export const debounce = (func, delay) => {
      let timer = null;
      return (...args) => {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      }
    };
    // 节流函数
    export const throttling = (fn, delay) => {
        let lastTime = 0;
        return function () {
            let nowTime = new Date().now();
            if(nowTime - lastTime > delay) {
                fn.call(this);
                lastTime = nowTime;
            }
        } 
    }
    

    50。格式化时间

    export const formatDate = (date, fmt) => {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
        }
      }
      return fmt;
    };
    

    const padLeftZero = (str) => {
    return ('00' + str).substr(str.length);
    };

    51. 文件提取

    const bufferSplit = (buffer, delimiter) => {
        let arr = {};
        let n = 0;
        while ((n = buffer.indexOf(delimtter) != -1)) {
            arr.push(buffer.slice(0, n));
            buffer = buffer.slice(n + delimiter.length);
        }
        arr.push(buffer);
        return arr;
    }
    

    52.生成随机颜色

    function getRandomColor () {
        let rgb = [];
        for (let i = 0; i < 3; i++) {
            let color = Math.floor(Math.random() * 256).toString();
            color = color.length === 1 ? '0' + color : color;
            rgb.push(color);
        }
        return '#' + rgb.join('');
    }
    

    53.驼峰命名

    //已知有字符串foo='get-element-by-id',写一个function将其转化成驼峰表示法”getElementById”
    const toUpper = (str) => {
    	let arr = str.split('-'); // 字符串截取
    	for (let i = 1; i < arr.length; i++) {
    		arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length - 1);
    	}
    		return arr.join(''); // 字符串拼接
    };
    

    54.排序去重

    // ES6 sort Set
    var arr = [32,4,67,82,21,11,11,11,11];
    arr = arr.sort((num1, num2) => {
    	return num1 - num2;
    });
    function unique(arr) {
    	return Array.from(new Set(arr))
    }
    	console.log(unique(arr));
    

    55.冒泡排序

    // 排序
    let arr = [55, 11, 44, 66, 11, 2, 3, 4, 9];
        for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < arr.length - 1 - i; j++) {
                if (arr[j] > arr[j + 1]) {
    				/**
    				 * arr[j] > arr[j + 1] 升序
    				 * arr[j] < arr[j + 1] 降序
    				 */
    				let temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
    	console.log(arr);
    // 去重
    //原数组
        var arr = [8, 11, 20, 5, 20, 8, 0, 2, 4, 0, 8];
        // 新数组
        var t = [];//var  t = [8,11];
        t[0] = arr[0];
        //arr中的每个元素
        for (var i = 0; i < arr.length; i++) {
            //t中的每个元素
            for (var k = 0; k < t.length; k++) {
    
            //当原数组中的值和新数组中的值相同的时候,就没有必要再继续比较了,跳出内循环
            if (t[k] === arr[i]) {
                break;
            }
            //拿原数组中的某个元素比较到新数组中的最后一个元素还没有重复
            if (k === t.length - 1) {
                //将数据插入新数组
                t.push(arr[i]);
            }
        }
    }
    

    56.数组反转

    // ES6 reverse
    var arr = [1,2,3,4,5,6,7,8];
    arr= arr.reverse();
    console.log(...arr);
    

    var arr = [1, 2, 3, 4, 5, 6, 7, 8];
    for (var i = 0; i < arr.length / 2; i++) {
    //借助第三方变量交换两个变量的值
    var temp = arr[i];
    arr[i] = arr[arr.length - i];
    arr[arr.length - i] = temp;
    }
    console.log(arr);

    57.css实现小三角

    #box {
          0;
         height: 0;
         border: 10px solid transparent;
         border-top-color: deeppink;
    }
    

    58.rem移动端适配

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                 8rem;
                height: 8rem;
                background: deeppink;
            }
    
    &lt;/style&gt;
    

    </head>
    <body>
    <div id="box"></div>
    </body>
    <script type="text/javascript">
    //获取屏幕宽度
    var width = document.documentElement.clientWidth;

    //获取html
    var htmlNode = document.querySelector(&#39;html&#39;);
    
    //设置html字体大小
    htmlNode.style.fontSize = width/16 + &#39;px&#39;;
    

    </script>
    </html>

    59.函数柯里化

    function ParamsCurry (fn) {
        let _arg = [].splice.call(arguments, 1);
        return function () {
            let newArg = _arg.concat([].splice.call(arguments, 0));
            return fn.apply(this, newArg);
        }
    }
    

    function Curry (fn) {
    let length = length || fn.length;
    return function () {
    if(arguments.length < length) {
    let combined = [fn].concat([].splice.call(arguments, 0));
    return Curry(ParamsCurry.apply(this, combined), length - arguments.length);
    } else {
    return fn.apply(this, arguments);
    }
    }
    }
    function add(a, b, c, d) {
    return a + b + c + d;
    }
    let demo = ParamsCurry(add);
    demo(1, 2, 3, 4);
    demo(1, 2, 3)(4);
    demo(1, 2)(3, 4);
    demo(1)(2)(3)(4);

    60. 打印菱形

    for (var i = 0; i < 6; i++) {
        for (var k = 0; k < 6 - i - 1; k++) {
            document.writeln(" ");
        }
        for (var j = 0; j <= (2 * i - 1) + 1; j++) {
            document.writeln("*");
        }
        document.writeln("<br/>");
    }
    //打印菱形的下半部分
    for (var i = 0; i < 5; i++) {
        for (var k = 0; k < i + 1; k++) {
            document.writeln(" ");
        }
        for (var m = 0; m < (9 - 3 * i) + i; m++) {
            document.writeln("*");
        }
        document.writeln("<br/>");
    }
    

    61.冒泡排序

    const sort = (arr) => {
        let temp = 0;
        for (lei i = 0; i <= arr.length; i++) {
            for (let j = 0; j <= arr.length - 1 - i; j++) {
                if (arr[j] > arr[j+1]) {  // 升序 arr[j] < arr[j+1] 降序
                    temp = arr[j]
                    arr[j] = arr[j+1]
                    arr[j+1] = temp
                }
            }
        }
        return arr;
    }
    

    62. 随机取出字符

    /**
     * @param min
     * @param max
     * @return {number}
     */
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max + 1 - min) + min)
    }
    

    /**
    *

    • @param len
    • @return {string}
      */
      function getRandomStr(len) {
      let template = "",
      index = "",
      result = "";
      for (let i = 65; i < 65 + 26; i++) {
      template += String.fromCharCode(i);
      }
      for (let i = 97; i < 97 + 26; i++) {
      template += String.fromCharCode(i);
      }
      for (let i = 48; i < 48 + 10; i++) {
      template += String.fromCharCode(i);
      }
      for (let i = 0; i<len;i++) {
      index = getRandom(0, template.length - 1);
      result += template[index];
      }
      return result;
      }

    63. 判断身份证的信息

    /**
     * @method getInfoPid
     * @param  {string} pid
     * @return {{出生月份: number, 出生年份: number, 天数: number, 性别: (string)}}
     */
    function getInfoPid(pid) {
        return {
            "出生年份": +pid.substr(6, 4),
            "出生月份": +pid.substr(10, 2),
            "天数": +pid.substr(12, 2),
            "性别": pid[pid.length - 2] % 2 === 0 ? "女" : "男"
        }
    }
    

    64. 获取年龄

    const isLeap = (year) => {
        return year % 4 === 0 && year % 100 !== 0 || year %400 === 0
    }
    const getAge = (year, month, day) => {
        let now = new Date();
        let age = new,getFullYear() - year;
        if (month === 2 && day === 29 && !isLeap(now.getFullYear())) {
            day = 28;
        }
        let birthThisDay = new Date(now.getFullYear(), month - 1, day);
        if (birthThisDay > now) {
            age --;
        }
        return age;
    }
    

    65. 获取距离生日时间

    const getBirth   = (montn, day) => {
        let now      = new Date(),
            year     = now.getFullYear(),
            // 今年的生日
            birthday = new Date(year, month - 1, day),
            dec      = birthday - dec,
            days     = dec / (24 * 60 * 60 * 1000);
        if (birthday <  now) {
            // 今年生日已过。计算激励明年生日的时间
            birthday.setFullYear(now.getFullYear + 1)
        }
        return Math.ceil(days);
    }
    

    66. 获取当前月每一天的星期

    const print    = () => {
        let now    = new Date(),
            y      = now.getFullYear(),
            m      = now.getMonth() + 1,
            days   = new Date(y, m, 0).getDate(),
            result = "";
        for(let i = 1;i < days; i++) {
            result += `${y}年${m}月${i}日,星期${new Date(y, m-1, i).getDay()}`
        }
        return result;
    }
    

    67. 快速生成文字

    ul>li*1>lorem*1
    

    68. 拖拽

    /**
     * @method drop
     * @param {HTMLElement} element
     */
    const drop = (element) => {
        // 不能用this,this指向window
        // console.log(this);
        let style = getComputedStyle(element),
            elementLeft = parseFloat(style.left),
            elementTop = parseFloat(style.top);
        element.onmousedown = (e) => {
            let pageX = e.pageX,
                pageY = e.pageY;
            if (e.button !== 0) return;
            window.onmousemove = (e) => {
                let disX = e.pageX - pageX,
                    disY = e.pageY - pageY,
                    newLeft = elementLeft + disX,
                    newTop = elementTop + disY;
                if (newTop < 0) {
                    newTop = 0;
                }
                element.style.left = `${newLeft}px`;
                element.style.top = `${newTop}px`;
            };
            window.onmouseup = window.onmouseleave = (e) => {
                if (e.button === 0) window.onmousemove = null;
            }
        }
    };
    

    69. 评分

    /** 评分
     * @method   Score
     * @param   {HTMLElement} element
     * @param   {string} initSrc 初始图片
     * @param   {string} changeSrc 变化的图片
     * @param   {HTMLElement} word 获取文字区域
     */
    const Score = (element, initSrc, changeSrc, word) => {
        let wrap = ['满意', '一般', '还不错', '很满意', '非常满意'];
        let star = -1;
        element.onclick = (e) => {
            if (e.target.tagName === 'IMG') {
                // 记录评分
                let index = Array.from(element.children).indexOf(e.target);
            }
        };
        element.onmouseover = (e) => {
            if (e.target.tagName === 'IMG') {
                e.target.src = changeSrc;
                // 处理之前的
                let prev = e.target.previousElementSibling;
                while (prev) {
                    prev.src = changeSrc;
                    prev = prev.previousElementSibling;
                }
                // 处理之后
                let next = e.target.nextElementSibling;
                while (next) {
                    next.src = changeSrc;
                    next = next.nextElementSibling;
                }
                // 处理文字
                // 得到父元素所有子元素
                let index = Array.from(element.children).indexOf(e.target);
                word.innerHTML = wrap[index];
            }
        };
        element.onmouseleave = (e) => {
            word.innerHTML = wrap[star] || "";
            for (let i = 0; i < element.children.length; i++) {
                if (i <= star) {
                    element.children[i].src = changeSrc;
                } else {
                    element.children[i].src = initSrc;
                }
            }
        }
    };
    

    70. 吸顶效果

    const Ceiling = (element) => {
        window.onscroll = (e) => {
            let rect = element.getBoundingClientRect();
            let scrollTop = 0;
            if (rect.top < 0) {
                element.style.position = 'fixed';
                element.style.top = 0;
                element.style.left = rect.left + 'px';
                element.style.width = rect.width + 'px';
                element.style.height = rect.height + 'px';
                element.style.boxSizing = 'border-box';
                // 记录滚动条的位置
                scrollTop = window.scrollY + rect.top;
            }
            if (window.scrollY < scrollTop) {
                element.setAttribute("style", "");
            }
        }
    };
    
    1. 小程序格式化时间

      var timeFormat = function(time){
        var date = getDate(time);
        var date_seconds = date.getTime() / 1000;
        var now = getDate();
        var now_seconds = now.getTime() / 1000;
        var timestamp = now_seconds - date_seconds;
        var timeStr = "";
        if(timestamp < 60){
          timeStr = "刚刚";
        }else if(timestamp >= 60 && timestamp < 60*60){
          var minutes = parseInt(timestamp / 60);
          timeStr = minutes + "分钟前";
        }else if(timestamp >= 60*60 && timestamp < 60*60*24){
          var hours = parseInt(timestamp / 60 / 60);
          timeStr = hours + "小时前";
        }else if(timestamp >= 60*60*24 && timestamp < 60*60*24*30){
          var days = parseInt(timestamp / 60 /60 /24);
          timeStr = days + "天前";
        }else{
          var year = date.getFullYear();
          var month = date.getMonth();
          var day = date.getDate();
          var hour = date.getHours();
          var minute = date.getMinutes();
          timeStr = year + "/" + month + "/" + day + " " + hour + ":" + minute;
        }
        return timeStr;
      }
      
    2. 生成随机验证码
      let randomCode = _ => {
           const codeArea = 'zxcvbnmlkjhgfdsaqwertyuiop' +
              'ZXCVBNMLKJHGFDSAQWERTYUIOP' +
              '0123456789';
          let result = '';
          while(result.length < 4) {
              let random = Math.round(Math.random() * 61),
                  char = codeArea[random];
              result.indexOf(char) === -1 ? result += char : null;
          }
          return result;
      }
      
  • 相关阅读:
    在ASP.NET Core中怎么使用HttpContext.Current (转载)
    如何在.Net Core 2.0 App中读取appsettings.json
    ASP.NET CORE MVC 2.0 如何在Filter中使用依赖注入来读取AppSettings,及.NET Core控制台项目中读取AppSettings
    linux中shell变量$#,$@,$0,$1,$2的含义解释<转>
    ijkplayer阅读学习笔记之从代码上看播放流程
    ubuntu命令整理中
    Android SDK Android NDK Android Studio 官方下载地址<转>
    Ubuntu启动 卡在checking battery state 解决方案
    解决 ffmpeg 在avformat_find_stream_info执行时间太长
    ijkplayer阅读笔记系列<转>
  • 原文地址:https://www.cnblogs.com/korea/p/11154083.html
Copyright © 2011-2022 走看看