Javascript學(xué)習(xí)筆記-詳解in運(yùn)算符
更新時(shí)間:2011年09月13日 21:57:35 作者:
in運(yùn)算符是javascript語言中比較特殊的一個(gè),可以單獨(dú)使用作為判斷運(yùn)算符,也常被用于for...in循環(huán)中遍歷對(duì)象屬性
一、判斷
語法
prop in objectName
如果objectName指向的對(duì)象中含有prop這個(gè)屬性或者鍵值,in運(yùn)算符會(huì)返回true。
var arr = ['one','two','three','four'];
arr.five = '5';
0 in arr;//true
'one' in arr; //false,只可判斷數(shù)組的鍵值
'five' in arr;//true,'five'是arr對(duì)象的屬性
'length' in arr;//true
原型鏈
in運(yùn)算符會(huì)在整個(gè)原型鏈上查詢給定的prop屬性
Object.prototype.sayHello = 'hello,world';
var foo = new Object();
'sayHello' in foo;//true;
'toString' in foo;//true;
'hasOwnProperty' in foo;//true;
對(duì)象與字面量
in運(yùn)算符在對(duì)待某些特定類型(String,Number)的對(duì)象和字面量時(shí)顯得不盡相同
var sayHelloObj = new String('hello,world');
var sayHello = 'hello,world';
var numObj = new Number(1);
var num = 1;
'toString' in sayHelloObj; //true
'toString' in sayHello; //類型錯(cuò)誤
'toString' in numObj;//true
'toString' in num;//類型錯(cuò)誤
究其原因,在MDN找到這樣一段關(guān)于String對(duì)象和字面量轉(zhuǎn)換的介紹,似乎可以解釋這個(gè)原因:
Because JavaScript automatically converts between string primitives and String objects, you can call any of the methods of the String object on a string primitive. JavaScript automatically converts the string primitive to a temporary String object, calls the method, then discards the temporary String object. For example, you can use the String.length property on a string primitive created from a string literal
試著這樣理解:因?yàn)閕n是運(yùn)算符而非一個(gè)方法(method),所以無法讓string字面量自動(dòng)轉(zhuǎn)換成String對(duì)象,又因?yàn)閕n運(yùn)算符待查詢方不是對(duì)象而是一個(gè)字符串(按老道Douglas的說法,只是object-like的類型),所以報(bào)類型錯(cuò)誤。
二、遍歷
很常用到的for...in循環(huán)語句,此語句中的in需要遵循另外一套語法規(guī)范:
for (variable in object)
statement
與單獨(dú)使用in作為運(yùn)算符不同,for...in循環(huán)語句只遍歷用戶自定義的屬性,包括原型鏈上的自定義屬性,而不會(huì)遍歷內(nèi)置(build-in)的屬性,如toString。
對(duì)象
function Bird(){
this.wings = 2;
this.feet = 4;
this.flyable = true;
}
var chicken = new Bird();
chicken.flyable = false;
for(var p in chicken){
alert('chicken.' + p + '=' + chicken[p]);
}
String對(duì)象,經(jīng)過測試Firefox,Chrome,Opera,Safari瀏覽器都是給出了注釋中的結(jié)果,只有IE瀏覽器只給出'more'和'world'
var str = new String('hello');
str.more = 'world';
for(var p in str){
alert(p);//'more',0,1,2,3,4
alert(str[p]);//'world','h','e','l','l','o'
}
字面量
遍歷數(shù)組字面量的鍵值和屬性
var arr = ['one','two','three','four'];
arr.five = 'five';
for(var p in arr){
alert(arr[p]);//'one','two','three','four','five'
}
遍歷string字面量,雖說單獨(dú)在string字面量前面使用in運(yùn)算符會(huì)報(bào)類型錯(cuò)誤,不過下面的代碼卻能夠正常運(yùn)行,此時(shí)IE瀏覽器是毫無聲息
var str = 'hello';
str.more = 'world';
for(var p in str){
alert(p);//0,1,2,3,4
alert(str[p]);//'h','e','l','l','o'
}
綜上
ECMA雖然有這方面的規(guī)范,但瀏覽器之間還是存在著差異,鑒于此,并不推薦用for...in去遍歷字符串,也不推薦拿去遍歷數(shù)組(如例子所示,為數(shù)組加上自定義屬性,遍歷就會(huì)被搞亂)
在遍歷對(duì)象方面,我們還可以使用對(duì)象的內(nèi)置方法hasOwnProperty()排除原型鏈上的屬性,進(jìn)一步加快遍歷速度,提升性能
function each( object, callback, args ){
var prop;
for( prop in object ){
if( object.hasOwnProperty( i ) ){
callback.apply( prop, args );
}
}
}
語法
prop in objectName
如果objectName指向的對(duì)象中含有prop這個(gè)屬性或者鍵值,in運(yùn)算符會(huì)返回true。
復(fù)制代碼 代碼如下:
var arr = ['one','two','three','four'];
arr.five = '5';
0 in arr;//true
'one' in arr; //false,只可判斷數(shù)組的鍵值
'five' in arr;//true,'five'是arr對(duì)象的屬性
'length' in arr;//true
原型鏈
in運(yùn)算符會(huì)在整個(gè)原型鏈上查詢給定的prop屬性
復(fù)制代碼 代碼如下:
Object.prototype.sayHello = 'hello,world';
var foo = new Object();
'sayHello' in foo;//true;
'toString' in foo;//true;
'hasOwnProperty' in foo;//true;
對(duì)象與字面量
in運(yùn)算符在對(duì)待某些特定類型(String,Number)的對(duì)象和字面量時(shí)顯得不盡相同
復(fù)制代碼 代碼如下:
var sayHelloObj = new String('hello,world');
var sayHello = 'hello,world';
var numObj = new Number(1);
var num = 1;
'toString' in sayHelloObj; //true
'toString' in sayHello; //類型錯(cuò)誤
'toString' in numObj;//true
'toString' in num;//類型錯(cuò)誤
究其原因,在MDN找到這樣一段關(guān)于String對(duì)象和字面量轉(zhuǎn)換的介紹,似乎可以解釋這個(gè)原因:
Because JavaScript automatically converts between string primitives and String objects, you can call any of the methods of the String object on a string primitive. JavaScript automatically converts the string primitive to a temporary String object, calls the method, then discards the temporary String object. For example, you can use the String.length property on a string primitive created from a string literal
試著這樣理解:因?yàn)閕n是運(yùn)算符而非一個(gè)方法(method),所以無法讓string字面量自動(dòng)轉(zhuǎn)換成String對(duì)象,又因?yàn)閕n運(yùn)算符待查詢方不是對(duì)象而是一個(gè)字符串(按老道Douglas的說法,只是object-like的類型),所以報(bào)類型錯(cuò)誤。
二、遍歷
很常用到的for...in循環(huán)語句,此語句中的in需要遵循另外一套語法規(guī)范:
for (variable in object)
statement
與單獨(dú)使用in作為運(yùn)算符不同,for...in循環(huán)語句只遍歷用戶自定義的屬性,包括原型鏈上的自定義屬性,而不會(huì)遍歷內(nèi)置(build-in)的屬性,如toString。
對(duì)象
復(fù)制代碼 代碼如下:
function Bird(){
this.wings = 2;
this.feet = 4;
this.flyable = true;
}
var chicken = new Bird();
chicken.flyable = false;
for(var p in chicken){
alert('chicken.' + p + '=' + chicken[p]);
}
String對(duì)象,經(jīng)過測試Firefox,Chrome,Opera,Safari瀏覽器都是給出了注釋中的結(jié)果,只有IE瀏覽器只給出'more'和'world'
復(fù)制代碼 代碼如下:
var str = new String('hello');
str.more = 'world';
for(var p in str){
alert(p);//'more',0,1,2,3,4
alert(str[p]);//'world','h','e','l','l','o'
}
字面量
遍歷數(shù)組字面量的鍵值和屬性
復(fù)制代碼 代碼如下:
var arr = ['one','two','three','four'];
arr.five = 'five';
for(var p in arr){
alert(arr[p]);//'one','two','three','four','five'
}
遍歷string字面量,雖說單獨(dú)在string字面量前面使用in運(yùn)算符會(huì)報(bào)類型錯(cuò)誤,不過下面的代碼卻能夠正常運(yùn)行,此時(shí)IE瀏覽器是毫無聲息
復(fù)制代碼 代碼如下:
var str = 'hello';
str.more = 'world';
for(var p in str){
alert(p);//0,1,2,3,4
alert(str[p]);//'h','e','l','l','o'
}
綜上
ECMA雖然有這方面的規(guī)范,但瀏覽器之間還是存在著差異,鑒于此,并不推薦用for...in去遍歷字符串,也不推薦拿去遍歷數(shù)組(如例子所示,為數(shù)組加上自定義屬性,遍歷就會(huì)被搞亂)
在遍歷對(duì)象方面,我們還可以使用對(duì)象的內(nèi)置方法hasOwnProperty()排除原型鏈上的屬性,進(jìn)一步加快遍歷速度,提升性能
復(fù)制代碼 代碼如下:
function each( object, callback, args ){
var prop;
for( prop in object ){
if( object.hasOwnProperty( i ) ){
callback.apply( prop, args );
}
}
}
相關(guān)文章
JavaScript+Canvas實(shí)現(xiàn)繪制音頻可視化波形圖
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript和Canvas實(shí)現(xiàn)繪制音頻可視化波形圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
DropDownList控件綁定數(shù)據(jù)源的三種方法
本文給大家分享web 中 DropDownList綁定數(shù)據(jù)源的幾種方式以及DropdownList控件動(dòng)態(tài)綁定數(shù)據(jù)源的兩種方法,下面通過本文給大家詳細(xì)介紹,感興趣的朋友一起看看2016-12-12
JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法,可實(shí)現(xiàn)綁定Li列表項(xiàng)對(duì)應(yīng)數(shù)值項(xiàng)的功能,涉及javascript鼠標(biāo)onmousemove、onmouseout及onclick等事件的相關(guān)使用技巧,需要的朋友可以參考下2015-08-08
有關(guān)JavaScript的10個(gè)怪癖和秘密分享
在本片文章中,作者將向您講述JavaScript中最鮮為人知的秘密。學(xué)習(xí)js的朋友可以參考下。2011-08-08
JavaScript數(shù)組排序reverse()和sort()方法詳解
這篇文章主要介紹了JavaScript數(shù)組排序reverse()和sort()方法詳解,需要的朋友可以參考下2017-12-12
微信小程序?qū)崿F(xiàn)簡單手寫簽名組件的方法實(shí)例
在使用微信的時(shí)候,為方便我們發(fā)送文件可以直接在上面進(jìn)行手寫簽名,這篇文章主要給大家介紹了關(guān)于利用微信小程序?qū)崿F(xiàn)簡單手寫簽名組件的相關(guān)資料,需要的朋友可以參考下2021-07-07
使用JavaScript實(shí)現(xiàn)一個(gè)小程序之99乘法表
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)一個(gè)小程序之99乘法表的相關(guān)資料,需要的朋友可以參考下2017-09-09

