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对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 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判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP Directory 函数的详解
2013/03/07 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python操作mongodb的9个步骤
2018/06/04 Python
python剪切视频与合并视频的实现
2020/03/03 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
《一件运动衫》教学反思
2014/02/19 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript