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 高效运行代码分析
Mar 18 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
百度地图api如何使用
Aug 03 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
浅析java线程中断的办法
Jul 29 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
使用原生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 文件缓存函数
2011/10/08 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
在Python程序中实现分布式进程的教程
2015/04/28 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
static函数与普通函数有什么区别
2015/12/25 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
英语演讲稿范文
2014/01/03 职场文书
给老师的检讨书
2014/02/11 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
卖房协议书
2014/04/11 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript