前端開發常用的函數

YacaToy 發布于2019-08-23 13:41 / 1846人閱讀

摘要：實用的函數集合總結基本類型的判斷在項目實例中，難免要做一些容錯處理或者是對實例的類型判斷，那么就可以把這部分的判斷整理成公共的文件，供全局使用。

實用的函數集合總結 基本類型的判斷

在項目實例中，難免要做一些容錯處理或者是對實例的類型判斷，那么就可以把這部分的判斷整理成公共的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]
此時引用類型克隆出來的對象就是完全獨立的對象了，源對象修改屬性不會影響到克隆的對象
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") 
...

GPU云服務器云服務器 php常用的變量函數 php的常用函數庫常用的服務器開發語言 php常用的開發工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99396.html

前端基礎入門五（掌握jQuery的常用api，實現動態效果）

摘要：基本概念學習目標學會如何使用，掌握的常用，能夠使用實現常見的效果。想要實現簡單的動畫效果，也很麻煩代碼冗余。實現動畫非常簡單，而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。為什么要學習jQuery？【01-讓div顯示與設置內容.html】使用javasc...

nevermind 2019-08-30 15:55 評論0 收藏0
前端基礎入門五（掌握jQuery的常用api，實現動態效果）

摘要：基本概念學習目標學會如何使用，掌握的常用，能夠使用實現常見的效果。想要實現簡單的動畫效果，也很麻煩代碼冗余。實現動畫非常簡單，而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。為什么要學習jQuery？【01-讓div顯示與設置內容.html】使用javasc...

codecook 2019-08-23 14:52 評論0 收藏0
前端基礎入門五（掌握jQuery的常用api，實現動態效果）

摘要：基本概念學習目標學會如何使用，掌握的常用，能夠使用實現常見的效果。想要實現簡單的動畫效果，也很麻煩代碼冗余。實現動畫非常簡單，而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。為什么要學習jQuery？【01-讓div顯示與設置內容.html】使用javasc...

WalkerXu 2019-08-02 14:09 評論0 收藏0
前端基礎入門五（掌握jQuery的常用api，實現動態效果）

摘要：基本概念學習目標學會如何使用，掌握的常用，能夠使用實現常見的效果。想要實現簡單的動畫效果，也很麻煩代碼冗余。實現動畫非常簡單，而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現常見的效果。為什么要學習jQuery？【01-讓div顯示與設置內容.html】使用javasc...

widuu 2019-07-01 11:14 評論0 收藏0
JavasScript重難點知識

摘要：忍者級別的函數操作對于什么是匿名函數，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數是一個很重要且具有邏輯性的特性。通常，匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0