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 相关文章推荐
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
vue 页面加载进度条组件实例
Feb 05 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
taro开发微信小程序的实践
May 21 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
javascript的键盘控制事件说明
2008/04/15 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
JSONP基础知识详解
2017/03/19 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Python多线程扫描端口代码示例
2018/02/09 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
python实现汽车管理系统
2018/11/30 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
wxpython绘制音频效果
2019/11/18 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
化学教师自荐信范文
2013/12/28 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery