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 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
python list的index()和find()的实现
2020/11/16 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
什么是测试驱动开发(TDD)
2012/02/15 面试题
土木工程专业个人求职信
2013/12/30 职场文书
2014年自我评价
2014/01/04 职场文书
成绩单家长评语大全
2014/04/16 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
写给父母的感谢信
2015/01/22 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
党员转正介绍人意见
2015/06/03 职场文书