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闭包的理解和实例
Aug 12 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 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 include_path设置技巧分享
2011/07/03 PHP
基于header的一些常用指令详解
2013/06/06 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php检测url是否存在的方法
2015/04/14 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
Python多进程机制实例详解
2015/07/02 Python
Python数组定义方法
2016/04/13 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python requests上传文件实现步骤
2020/09/15 Python
python中pivot()函数基础知识点
2021/01/03 Python
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
工程安全员岗位职责
2014/03/09 职场文书
感恩教育月活动总结
2014/07/07 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2014年物流工作总结
2014/11/25 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书