Javascript学习笔记-详解in运算符


Posted in Javascript onSeptember 13, 2011

一、判断
语法
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 相关文章推荐
jQuery的三种$()
Dec 30 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
JS中数据结构之栈
Jan 01 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
react基本安装与测试示例
Apr 27 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 #Javascript
ie下动态加态js文件的方法
Sep 13 #Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 #Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 #Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 #Javascript
js Event对象的5种坐标
Sep 12 #Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 #Javascript
You might like
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP fclose函数用法总结
2019/02/15 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
javascript打印输出json实例
2013/11/11 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
基于python实现文件加密功能
2020/01/06 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
团委书记的竞聘演讲稿
2014/04/24 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
高三毕业评语
2014/12/31 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
公司仓库管理制度
2015/08/04 职场文书
教师教育心得体会
2016/01/19 职场文书
《我的长生果》教学反思
2016/02/20 职场文书