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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
AngularJs表单验证实例详解
May 30 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
php swoft框架实例用法
2020/12/22 PHP
javascript天然的迭代器
2010/10/29 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
asm.js使用示例代码
2013/11/28 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
浅谈React高阶组件
2018/03/28 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python字符串的常见操作实例小结
2019/04/08 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
善意的谎言事例
2014/02/15 职场文书
演讲稿开场白台词
2014/08/25 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
乱世佳人观后感
2015/06/08 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js