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 读后台cookie代码
Sep 15 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python线程指南分享
2019/11/19 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
卫生系统先进事迹
2014/05/13 职场文书
项目建议书
2015/02/04 职场文书
爱国影片观后感
2015/06/18 职场文书
oracle DGMGRL ORA-16603报错的解决方法(DG Broker)
2021/04/06 Oracle
js实现上传图片到服务器
2021/04/11 Javascript
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS