Javascript學習筆記-詳解in運算子

來源:互聯網
上載者:User

一、判斷
文法
prop in objectName
如果objectName指向的對象中含有prop這個屬性或者索引值,in運算子會返回true。 複製代碼 代碼如下:var arr = ['one','two','three','four'];
arr.five = '5';
0 in arr;//true
'one' in arr; //false,只可判斷數組的索引值
'five' in arr;//true,'five'是arr對象的屬性
'length' in arr;//true

原型鏈
in運算子會在整個原型鏈上查詢給定的prop屬性 複製代碼 代碼如下:Object.prototype.sayHello = 'hello,world';
var foo = new Object();
'sayHello' in foo;//true;
'toString' in foo;//true;
'hasOwnProperty' in foo;//true;

對象與字面量
in運算子在對待某些特定類型(String,Number)的對象和字面量時顯得不盡相同 複製代碼 代碼如下: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; //類型錯誤

'toString' in numObj;//true
'toString' in num;//類型錯誤

究其原因,在MDN找到這樣一段關於String對象和字面量轉換的介紹,似乎可以解釋這個原因:

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
試著這樣理解:因為in是運算子而非一個方法(method),所以無法讓string字面量自動轉換成String對象,又因為in運算子待查詢方不是對象而是一個字串(按老道Douglas的說法,只是object-like的類型),所以報類型錯誤。

二、遍曆

很常用到的for...in迴圈語句,此語句中的in需要遵循另外一套文法規範:

for (variable in object)
statement
與單獨使用in作為運算子不同,for...in迴圈語句只遍曆使用者自訂的屬性,包括原型鏈上的自訂屬性,而不會遍曆內建(build-in)的屬性,如toString。

對象 複製代碼 代碼如下: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對象,經過測試Firefox,Chrome,Opera,Safari瀏覽器都是給出了注釋中的結果,只有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'
}

字面量
遍曆數組字面量的索引值和屬性 複製代碼 代碼如下:var arr = ['one','two','three','four'];
arr.five = 'five';
for(var p in arr){
alert(arr[p]);//'one','two','three','four','five'
}

遍曆string字面量,雖說單獨在string字面量前面使用in運算子會報類型錯誤,不過下面的代碼卻能夠正常運行,此時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雖然有這方面的規範,但瀏覽器之間還是存在著差異,鑒於此,並不推薦用for...in去遍曆字串,也不推薦拿去遍曆數組(如例子所示,為數組加上自訂屬性,遍曆就會被搞亂)

在遍曆對象方面,我們還可以使用對象的內建方法hasOwnProperty()排除原型鏈上的屬性,進一步加快遍曆速度,提升效能 複製代碼 代碼如下:function each( object, callback, args ){
var prop;
for( prop in object ){
if( object.hasOwnProperty( i ) ){
callback.apply( prop, args );
}
}
}

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.