前端开发经常使用的函数

实用的函数集合总结

基本类型的判断

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

利用object.prototype.toString.call能够判断对象的类型

变量的两种类型值:
一、基本类型：String,Number,Boolean,undefined,null，按值访问
二、引用类型：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') 
...