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 相关文章推荐
使用prototype.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
layui导出所有数据的例子
Sep 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的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
PyQt 线程类 QThread使用详解
2017/07/16 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
详解KMP算法以及python如何实现
2020/09/18 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
作文评语集锦
2014/12/25 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
Python基本知识点总结
2022/04/07 Python