js基礎(一):判斷類型

js基礎(二):構造函數與原型html

1、常見實例

判斷是否爲對象

let obj = {}

// 1.Object.prototype.toString

if (Object.prototype.toString.call(obj) === '[Object Object]') {
    console.log('對象!')
}

// 2.constructor

if (obj.constructor === Object) {
    console.log('對象!')
}

// 3.$.type() 

if ($.type(obj) === 'object') {
    console.log('對象!')
}

// 4.$.isPlainObject() , 用於判斷指定參數是不是一個純粹的對象

if ($.isPlainObject(obj) === 'object') {
    console.log('對象!')
}

判斷對象是否爲空對象

let obj = {}

// 1.JSON

if (JSON.stringify(obj) === '{}') {
    console.log('空對象!')
}

// 2.Object.keys(), es6方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組

if (Object.keys(obj).length === 0) {
    console.log('空對象!')
}

// 3.循環

for (var i in obj) { 
    return true // 不爲空
}
return false // 空對象

// 4. $.isEmptyObject(), 該對象沒有屬性能夠經過for...in迭代

if ($.isEmptyObject(obj)) {
    console.log('空對象!')
}

判斷是否爲數組

let arr = []

// 1.Object.prototype.toString

if (Object.prototype.toString.call(arr) === '[object Array]') {
    console.log('數組!')
}

// 2.constructor

if (arr.constructor === Array) {
    console.log('數組!')
}

// 3.$.type() 

if ($.type(arr) === 'array') {
    console.log('數組!')
}

// 4.Array.isArray, 當檢測Array實例時, Array.isArray 優於 instanceof,由於Array.isArray能檢測iframes

if (arr instanceof Array === true) {
    console.log('數組!')
}
//Array.isArray是ES 5.1推出的,不支持IE6~8。假如不存在 Array.isArray(),則在其餘代碼以前運行下面的代碼將建立該方法
if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

// 5.instanceof

if (arr instanceof Array === true) {
    console.log('數組!')
}

判斷是否爲數組是否爲空數組

let arr = []

// 1.length,簡易版,已知爲數組

if (arr && arr.length > 0) {
    console.log('不爲空數組!')
} else {
    console.log('空數組!')
}

// 2.Object.prototype.isPrototypeOf,測試一個對象是否存在於另外一個對象的原型鏈上

if (Object.prototype.isPrototypeOf(arr) && Object.keys(arr).length === 0) {
    console.log('空數組!')
}

// 3.Array.isArray,一樣存在兼容問題

if (Array.isArray(arr) && arr.length === 0) {
    console.log('空數組!')
}

判斷字符串爲json

function isJSON(str) {
    if (typeof str == 'string') {
        try {
            var obj=JSON.parse(str);
            if(typeof obj == 'object' && obj ){
                return true; // 可轉
            }else{
                return false;// 不可轉
            }

        } catch() {
            return false; // 不可轉
        }
    }
    console.log('It is not a string!')
}

判斷字符串是否爲數字

let num = '3'

// 1.isNaN, null、空格以及空串會被按照0來處理

if ((!isNaN(num)) && num != null && num != '') {
    console.log('num爲數字!')
}

// 2.正則

function isNumber(val) {
    var regPos = /^\d+(\.\d+)?$/; //非負浮點數
    var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //負浮點數
    if(regPos.test(val) || regNeg.test(val)) {
        return true;
    } else {
        return false;
    }
}

判斷某值爲null或者爲undefined

// jquery源碼推薦寫法,省代碼
var obj = {}
if(obj.a == null) {
    //至關於obj.a === null || obj.a === undefined
}

2、五大常見方法

1.typeof

操做符返回一個字符串,表示未經計算的操做數的類型,用於除null、對象和數組以外的通用類型的判斷方法
圖片描述jquery

2.Object.prototype.toString

原生原型擴展函數,用來精確的區分數據類型,萬能
圖片描述es6

3.$.type()

用於肯定JavaScript內置對象的類型,並返回小寫形式的類型名稱,萬能
圖片描述json

4.instanceof

該運算符用於測試構造函數的prototype屬性是否出如今對象的原型鏈中的任何位置,用於檢測引用類型的判斷方法,針對Array和RegExp進行判斷。
圖片描述segmentfault

5.constructor

該屬性返回對建立此對象的數組函數的引用,每一個具備原型的對象都會自動得到constructor屬性。
圖片描述數組

注意: 類繼承時的問題函數

 function A(){};

 function B(){};

 A.prototype = new B(); //A繼承自B

 var aObj = new A();

 alert(aobj.constructor === B) //true;

 alert(aobj.constructor === A) //false;

//instanceof方法中對象直接繼承和間接繼承的都會報true

alert(aobj instanceof B) //true;

alert(aobj instanceof A) // true;

//解決construtor的問題一般是讓對象的constructor手動指向本身

aobj.constructor = A; //將本身的類賦值給對象的constructor屬性

alert(aobj.constructor === A) // true;

alert(aobj.constructor === B) // false;基類不會報true了;

原博:https://blog.csdn.net/u011684...測試

參考:typeofinstanceof$.type][9],[$.isPlainObject()判斷爲jsonspa

相關文章
相關標籤/搜索