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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
express.js中间件说明详解
Mar 19 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
JS实现纸牌发牌动画
Jan 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
PHP中的switch语句的用法实例详解
2015/10/21 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
西安当代医院管理研究院笔试题
2015/12/11 面试题
介绍一下linux的文件系统
2012/03/20 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
中间件分为哪几类
2016/09/18 面试题
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
园长自我鉴定
2013/10/06 职场文书
低碳环保倡议书
2014/04/14 职场文书
补充协议书范本
2014/04/23 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
Vue.Draggable实现交换位置
2022/04/07 Vue.js
mysql数据库隔离级别详解
2022/06/16 MySQL