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实现的listview效果
Apr 28 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
js电话号码验证方法
Sep 28 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
详解Vue组件实现tips的总结
Nov 01 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 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编程最快明白》第三讲:php数组
2010/11/01 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
js 金额文本框实现代码
2012/02/14 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
利用python汇总统计多张Excel
2020/09/22 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
项目资料员岗位职责
2013/12/10 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis