首頁 > web前端 > js教程 > jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()_jquery

jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()_jquery

WBOY
發布: 2016-05-16 15:46:06
原創
1001 人瀏覽過

javascript中對變數類型的判斷中,我們講解了jquery中$.type()實現的原理。當然,jquery除了提供$.type的工具方法外,還提供了幾個其他的工具方法:$.isFunction(), $.isArray(), $.isWindow(), $.isNumeric()等。這幾個方法從方法名稱上就能看出其用途來,下面我們來一一講解這幾個方法在jQuery(2.1.2)中實現的內部細節。

1. $.isFunction()

$.isFunction()是用來判斷變數是否為function類型,我們透過幾個例子來看:

$.isFunction(123); // false
$.isFunction(true);// false
$.isFunction([1, 2]);// false
$.isFunction(function(){});// true

function func(){

}
var sfunc = function(){

}
$.isFunction(func); // true
$.isFunction(sfunc);// true
登入後複製

從上面的例子中能夠看到,在$.isFunction(param)中,若傳入的param是function類型,則傳回true;其他的型別則傳回false。
查看jquery的原始碼我們可以看到,$.isFunction()也是透過$.type()實現的:

isFunction: function( obj ) {
	return jQuery.type(obj) === "function";
}
登入後複製

2. $.isArray()

$.isArray()是用來判斷變數是否為array型別。同樣,我們也透過幾個例子來看$.isArray的用法:

$.isArray(123);  // false
$.isArray(true); // false
$.isArray([1, 2]);// true
$.isArray(new Array(3, 4)); // true
登入後複製

無論是array的字面量還是使用new關鍵字建立的變量,都能使用$.isArray()判斷其是array類型。在jquery原始碼中,$.isArray呼叫的就是原生Array提供的isArray方法。因為在高版本的瀏覽器中,已經提供了一個isArray方法給原生JavaScript一個isArray方法來判斷變數是否為array類型。
isArray: Array.isArray
3. $.isWindow()

$.isWindow()是用來判斷目前變數是否為window,如:

$.isWindow(window); // true
$.isWindow([]); 	// false
$.isWindow(null); 	// false
登入後複製

在jQuery原始碼:

isWindow: function( obj ) {
	return obj != null && obj === obj.window;
}
登入後複製

他是透過判斷obj是否有window屬性,來判斷obj是否為window物件。因為window物件裡有一個屬性window,就是他自己,所以:window.window===window,同樣的:

window.window.window.window === window;

可以一直循環下去。

而程式碼裡為什麼要先判斷obj是否為null呢?因為在判斷null或undefined是否有window屬性時,程式碼會拋出例外:Uncaught TypeError: Cannot read property ‘window' of null。因此,為了防止程式碼錯誤,首先判斷變數是否為null,若為null,則它肯定不是window對象,直接返回false;否則再判斷這個變數有沒有window屬性。

4. $.isNumeric()

$.isNumeric()是用來判斷當前變數是否為數字類型,但為什麼我不使用$.type()=="number"來判斷呢。我們先來看幾個官方的例子:

$.isNumeric("-10"); // true
$.isNumeric(16);   // true
$.isNumeric(0xFF);  // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5"); // true (exponential notation string)
$.isNumeric(3.1415); // true
$.isNumeric(+10);  // true
$.isNumeric(0144);  // true (octal integer literal)
$.isNumeric("");   // false
$.isNumeric({});   // false (empty object)
$.isNumeric(NaN);  // false
$.isNumeric(null);  // false
$.isNumeric(true);  // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false
登入後複製

使用$.isNumeric()能夠判斷出「-10」, 「0xFF」這樣字串類型的數字,而$.type()則會將其解析為string型別。
在jquery原始碼中,是這樣判斷變數類型的:

isNumeric: function( obj ) {
	// parseFloat NaNs numeric-cast false positives (null|true|false|"")
	// ...but misinterprets leading-number strings, particularly hex literals ("0x...")
	// subtraction forces infinities to NaN
	// adding 1 corrects loss of precision from parseFloat (#15100)
	return !jQuery.isArray( obj ) && (obj - parseFloat( obj ) + 1) >= 0;
}
登入後複製

先判斷其變數是否為array類型,若是則直接傳回false。可是為什麼要先判斷變數是否為array類型呢?因為[123]這樣類型的數組是可以直接進行減法運算的,同時也能透過parseFloat([“123”])轉換為數字:

[100] - 60 		// 40
[100] - [60] 		// 40
parseFloat([123]) 	// 123
parseFloat(["345"]) // 345
登入後複製

因此不能直接透過parseFloat()轉換,然後判斷。首先得判斷這個變數是否為數組;若不是才進行下一步的判斷:

(obj - parseFloat( obj ) 1) >= 0

純數字,字串類型的數字,0開頭的數字(8進位),0x開頭的陣列(16進位)等,都能透過parseFloat()正常轉換為10進位的數字。經過上面表達式的運算,一定是大於0的。可是為什麼要加上1呢?程式碼裡也解釋了,透過parseFloat()轉換到,會造成精度遺失的問題,因此 1後,運算結果更加的準確。

而其他類型的經過parseFloat()轉換後得到的是NaN,NaN無論經過怎樣的運算,都是不能跟0比較的,回傳false。

在jquery之前的版本(如2.0.2):

isNumeric: function( obj ) {
	return !isNaN( parseFloat(obj) ) && isFinite( obj );
}
登入後複製

我們可以發現,使用這樣的程式碼$.isNumeric([123])運行後,得到的true,而實際上,它是個陣列類型。不過還好,在後續的版本已經修復了。

5. $.isEmptyObject()

$.isEmptyObject()不是用來判斷變數的型別了,而是判斷一個object型別是否為空,不包含任何屬性。
從 jQuery 1.4 開始,這個方法既偵測物件本身的屬性,也偵測從原型繼承的屬性(因此沒有使用hasOwnProperty)。參數應為普通的JavaScript對象, 對於其他類型的物件(DOM元素,原始strings/numbers,host物件)在跨瀏覽器中可能無法提供一致的結果。

$.isEmptyObject({name:"wenzi"}) // false
$.isEmptyObject({}) // true

function Person(){
	this.name = "wenzi"
}
$.isEmptyObject(new Person()); // false

function Student(){

}
Student.prototype.name = "wenzi";
$.isEmptyObject(new Student()); // false
登入後複製

我们能够看到,不论是对象本身的属性,还是prototype上的属性,只要存在,都会返回false。

isEmptyObject: function( obj ) {
	var name;
	for ( name in obj ) {
		return false;
	}
	return true;
}
登入後複製

在jquery中,是通过for~in进行检测的。因为for~in也是能循环到prototype上的属性的,若进入到循环中,则说明obj存在属性,发挥false;否则返回true。
6. 总结

jquery中还提供了很多各种各样的工具方法,让我们在编写js代码时更加的方便。以后有机会时再总结其他的工具方法。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板