1. 程式人生 > >前端開發常用的函式

前端開發常用的函式

實用的函式集合總結

基本型別的判斷

在專案例項中,難免要做一些容錯處理或者是對例項的型別判斷,那麼就可以把這部分的判斷整理成公共的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