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 相关文章推荐
理解JSON:3分钟课程
Oct 28 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
Angular2自定义分页组件
Apr 19 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
JS实现炫酷雪花飘落效果
Aug 19 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
MySQL 日期时间函数常用总结
2012/06/12 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
Angular实现响应式表单
2017/08/04 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
如何基于python测量代码运行时间
2019/12/25 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
求职信模版
2013/11/30 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
大学军训感想
2014/02/12 职场文书
公司处罚决定书
2015/06/24 职场文书