• 前端开发常用的函数


    实用的函数集合总结

    基本类型的判断

    在项目实例中,难免要做一些容错处理或者是对实例的类型判断,那么就可以把这部分的判断整理成公共的js文件,供全局使用。

    利用object.prototype.toString.call可以判断对象的类型

    变量的两种类型值:
    1、基本类型:String,Number,Boolean,undefined,null,按值访问
    2、引用类型:Object,Array, 对象保存在内存中

    可以作为项目的工具类,比如命名为tool.js

    
    
    
    export default isNumber(value) {
        return Object.prototype.toString.call(value) == '[object Number]'
    }
    export default isString(value) {
        return Object.prototype.toString.call(value) == '[object String]'
    }
    export default isArray(value) {
        return Object.prototype.toString.call(value) == '[object Array]'
    }
    export default isBoolean(value) {
        return Object.prototype.toString.call(value) == '[object Boolean]'
    }
    export default isUndefined(value) {
        return value === undefined
    }
    export default isNull(value) {
        return value === null
    }
    export default isSymbol(value) {
        return Object.prototype.toString.call(value) == '[object Symbol]'
    }
    export default isObject(value) {
        return ( Object.prototype.toString.call(value) == '[object Object]'
         ||
            // if it isn't a primitive value, then it is a common object
            (
              !isNumber(value) &&
              !isString(value) &&
              !isBoolean(value) &&
              !isArray(value) &&
              !isNull(value) &&
              !isFunction(value) &&
              !isUndefined(value) &&
              !isSymbol(value)
            )
        )
    }
    
    //是否是一个空对象
    export function isEmptyObject(obj) {
        if(!isObject(obj)) {
            return false
        }
        if(var key in obj) {
            return false
        }
        return true
    }
    
    //是否是一个空数组
    export function isEmptyArray(array) {
        if(!isArray(array)) {
            return false
        }
        return array.length > 0 ? false : true
    }
    
    export function isFunction(value) {
      return Object.prototype.toString.call(value) == '[object Function]';
    }
    
    
    
    
    

    引用类型克隆合并

    Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果拷贝后的结果是两个对象指向同一引用地址,修改其中一个对象的属性,则另一个对象的属性也会改变
    所以改变引用类型值时会影响到拷贝的值

    
    var obj1 = {a: {b: 1}};  
    var obj2 = Object.assign({}, obj1);  
    obj1.a.b = 2;  
    obj2.a.b // 2 
    

    下面extend函数就是解决上面的问题

    
    
    /*
        深度合并内容
        引用类型克隆合并
        arguments[0] = target
        arguments type is Object Or Array
        多内容合并覆盖优先级: arguments[0]<arguments[1]<arguments[2]..
        如果sources 不是数组或者对象 则直接忽略
    
        使用  extend(target, ...source)
     */
    export function extend(){
      var args = Array.prototype.slice.call(arguments);
      if(args.length === 0){
        console.error('extends params is undefined')
        return {};
      }
      if(args.length === 1){
        return args[0]
      }
      //要合并的目标对象
      var target = args[0];
      //要合并的内容 
      var sources = args.slice(1,args.length)
    
      if(!isObject(target) && !isArray(target)){
        target = {}; 
      }
      sources.map(function(item){
        //防止死循环
        if(target === item){
            return false;
        }
        //如果内容是对象 
        if(isObject(item)){
            //开始遍历
            for(var key in item){
                //如果内容是对象
                if(isObject(item[key])){
                    //修正数据
                    target[key] = (target[key] && isObject(target[key]))?target[key]:{};
                    target[key] = extend(target[key],item[key])
                }else if(isArray(item[key])){
                    //修正数据
                    target[key] = (target[key] && isArray(target[key]))?target[key]:[];
                    target[key] = extend(target[key],item[key])
                }else{
                    //基本类型直接赋值
                    target[key] = item[key]
                }
            }
        }else if(isArray(item)){
            for(var i = 0; i<item.length ;i++){
                //如果内容是对象
                if(isObject(item[i])){
                    //修正数据
                    target[i] = (target[i] && isObject(target[i]))?target[i]:{}
                    target[i] = extend(target[i],item[i])
                }else if(isArray(item[i])){
                    //修正数据
                    target[i] = (target[i] && isArray(target[i]))?target[i]:[];
                    target[i] = extend(target[i],item[i])
                }else{
                    //基本类型直接赋值
                    target[i] = item[i]
                }
            }
        }
        //其他类型直接忽略  
      })
      return target
    }
    
    

    此时引用类型克隆出来的对象就是完全独立的对象了,源对象修改属性不会影响到克隆的对象

    
    var obj1 = {a: {b: 1}};  
    var obj2 = extend({}, obj1)  
    obj1.a.b = 2;  
    obj2.a.b // 1
    

    可以合并 对象与对象,数组与数组,对象与数组等

    不同时间形式的输出

    时间戳是一样的,有时需要根据需求输出不一样格式的时间形式

    • yyyy年MM月dd日 hh:mm:ss
    • yyyy年MM月dd日
    • yyyy-mm-dd
    
    /*@param date 时间戳*/
    /*@param format 时间格式*/
    function dateFormat(date,format){
        if(!format || typeof format !== 'string'){
          console.error('format is undefiend or type is Error');
          return '';
        }
    
        date = date instanceof Date? date : (typeof date === 'number'|| typeof date === 'string')? new Date(date): new Date();
    
        //解析
        var formatReg = {
          'y+': date.getFullYear(),
          'M+': date.getMonth()+1,
          'd+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds()
        }
        for(var reg in formatReg){
          if(new RegExp(reg).test(format)){
                var match = RegExp.lastMatch;
                format = format.replace(match, formatReg[reg]< 10 ? '0'+formatReg[reg]: formatReg[reg].toString() );
          }
        }
        return format;
    }
    
    

    这样,把你想要的时间的格式和时间戳传入即可。

    
    dateFormat(new Date().getTime(),'yyyy-MM-dd hh:mm:ss') 
    dateFormat(new Date().getTime(),'MM-dd-yy hh:mm:ss') 
    ...
    
    

    原文地址:https://segmentfault.com/a/1190000017137331

  • 相关阅读:
    【转载】Spring各jar包详解
    Docker attach卡着的解决
    三张图搞透第一范式(1NF)、第二范式(2NF)和第三范式(3NF)的区别
    决策表
    因果图与决策表法
    边界值分析法
    黑盒测试方法
    软件测试的基本流程
    软件测试原则
    软件测试与软件开发
  • 原文地址:https://www.cnblogs.com/qixidi/p/10114178.html
Copyright © 2020-2023  润新知