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

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

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

  1. function isPrimitive(value) {
  2. return isStatic(value) || typeof value === 'symbol'
  3. }

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

  1. function isObject(value) {
  2. let type = typeof value;
  3. return value != null && (type == 'object' || type == 'function');
  4. }

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('.');
    //根据.切割      
    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值对应的值      
    };
};

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 {
     width: 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{
            width: 8rem;
            height: 8rem;
            background: deeppink;
        }

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

    //获取html
    var htmlNode = document.querySelector('html');

    //设置html字体大小
    htmlNode.style.fontSize = width/16 + 'px';

</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", "");
        }
    }
};

71. 小程序格式化时间

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

72. 生成随机验证码```javascript

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


<a name="qV5Eb"></a>
### 73. 获取URL参数(方法二)```javascript
let queryUrlParams = str => {
    let aElement = document.createElement('a');
    aElement.href = str;
    let {search, hash} = aElement,
        params = {};
    search = search.substr(1);
    hash = hash.substr(1);
    hash ? params.hash = hash : null;
   if (search) {
       search = search.split('&');
       search.forEach(item => {
           item = item.split('=');
           params[item[0]] = item[1];
       })
   }
    return params;
};

console.log(queryUrlParams('http://www.baidu.com/news?nid=1&name=china&pagesize=10#visitor'));

74. 选项卡

// TODO let作用域实现

let demo = document.getElementsByTagName('li'),
    div = document.getElementsByTagName('div');
console.log(div);
for (let i = 0; i < demo.length; i++) {
    demo[i].onclick = function () {
        changeTab(i);
    }
}
function changeTab(index) {
    for (let i = 0; i < demo.length; i++) {
        demo[i].className = '';
        div[i].className = '';
    }
    demo[index].className = 'active';
    div[index].className = 'show';
}

75. 时间字符串格式化```javascript

String.prototype.myFormatTime = function myFormatTime( template = ‘{0}年{1}月{2}日 {3}时{4}分{5}秒’) { let ary = this.match(/\d+/g).map(item => (item < 10 ? ‘0’ + item : item)); return template.replace(/{(\d)}/g, (…[, index]) => ary[index] || ‘00’); };


<a name="DulOp"></a>
### 76. 获取URL参数```javascript
function queryURLParams() {
    let obj = {};
    this.replace(/([^?=#]+)=([^?=#]+)/g, (...[, $1, $2]) => obj[$1] = $2);
    this.replace(/#([^#=?]+)/, (...[, $1]) => obj['HASH'] = $1)
    return obj;
}
String.prototype.queryURLParams = queryURLParams;

77. 千分位分割```javascript

function millimeter() { return this.replace(/\d{1,3}(?=(\d{3})+$)/, content => content + ‘,’) }


<a name="n5oCb"></a>
### 78。根据时间戳判断距离当前天数, time:时间戳
```javascript
export function FGetDays(time) {
  const seconds = time - Date.now()
  if (seconds < 0) return '已过期'
  return Math.ceil(seconds / (3600000 * 24))
}

79. 生成随机ID

class GetOwnId {
  constructor () {
    this.proxy = new Proxy({
      id: Math.random().toString(32).slice(-8)
    }, {})
  }
  get id () {
    return this.proxy.id
  }
}