前端開發經常使用的函數

實用的函數集合總結

基本類型的判斷

在項目實例中，不免要作一些容錯處理或者是對實例的類型判斷，那麼就能夠把這部分的判斷整理成公共的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') 
...