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 相关文章推荐
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
Vue SSR 组件加载问题
May 02 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
微信小程序 如何获取网络状态
Jul 26 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里面的抽象类
2010/01/28 PHP
PHP Class&Object -- 解析PHP实现二叉树
2013/06/25 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
纯css下拉菜单 无需js
2016/08/15 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
一套.net面试题及答案
2016/11/02 面试题
服装机修工岗位职责
2013/12/26 职场文书
致200米运动员广播稿
2014/02/06 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
外科护士长工作总结
2015/08/12 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL