Javascript学习笔记-详解in运算符
更新时间：2011年09月13日 21:57:35 作者：
in运算符是javascript语言中比较特殊的一个，可以单独使用作为判断运算符，也常被用于for...in循环中遍历对象属性
一、判断
语法
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 );
}
}
}
语法
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 );
}
}
}
相关文章
这篇文章主要为大家详细介绍了如何利用JavaScript和Canvas实现绘制音频可视化波形图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
本文给大家分享web 中 DropDownList绑定数据源的几种方式以及DropdownList控件动态绑定数据源的两种方法，下面通过本文给大家详细介绍，感兴趣的朋友一起看看2016-12-12
这篇文章主要介绍了JavaScript实现LI列表数据绑定的方法,可实现绑定Li列表项对应数值项的功能,涉及javascript鼠标onmousemove、onmouseout及onclick等事件的相关使用技巧,需要的朋友可以参考下2015-08-08
在本片文章中，作者将向您讲述JavaScript中最鲜为人知的秘密。学习js的朋友可以参考下。2011-08-08
JavaScript数组排序reverse()和sort()方法详解
这篇文章主要介绍了JavaScript数组排序reverse()和sort()方法详解,需要的朋友可以参考下2017-12-12
在使用微信的时候,为方便我们发送文件可以直接在上面进行手写签名,这篇文章主要给大家介绍了关于利用微信小程序实现简单手写签名组件的相关资料,需要的朋友可以参考下2021-07-07
JavaScript中this机制提供了更优雅的方式来隐含地“传递”一个对象引用,导致更加干净的API设计和更容易的复用,this既不是函数自身的引用,也不是函数词法作用域的引用,this实际上是在函数被调用时建立的一个绑定,它指向什么是完全由函数被调用的调用点来决定的2023-11-11
这篇文章主要介绍了使用JavaScript实现一个小程序之99乘法表的相关资料,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了JSONP和批量操作功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
JS组件的扩展和封装，我们来感受下JQuery为我们提供$.Extend的神奇，接下来通过本文给大家分享JS组件系列之JS组件封装过程详解，需要的朋友参考下吧2017-04-04
最新评论