javascript中for/in循环及使用技巧


Posted in Javascript onSeptember 01, 2015

JavaScript 支持不同类型的循环:

for - 循环代码块一定的次数

for/in - 循环遍历对象的属性

while - 当指定的条件为 true 时循环指定的代码块

do/while - 同样当指定的条件为 true 时循环指定的代码块

1. in运算符:要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数是一个对象或数组。如果该运算符左边的值是右边对象的一个属性名,则返回true。

例如:

var point={x:1,y:2}; //对象直接量
   var has_x="x" in point; //返回true
   var has_z="z" in point; //返回false
   var ts="toString" in point;//返回true,toString为继承方法

   2. for/in语句:语法,

for (variable in object)
                           statement;

      提供了一种遍历对象属性的方法。

例:

for(var prop in my_object) {
    document.write("name:"+prop+";value:"+my_object[prop],"<br>");
  }

      javascript的数组是一种特殊的对象,因此for/in循环可以像枚举对象属性一样枚举数组下标。

可以把一个对象的所有属性名复制到一个数组中,

例:

var o= {x:1,y:2,z:3};
  var a=new Array();
  var i=0;
  for (a[i++] in o) 
  ;//空语句,用于初始化数组

    3. in运算符与for/in语句不同,for/in语句in的左边可以是声明一个变量的var语句,数组的一个元素或者是对象的一个属性,不能使字符串。

    4. 数组常用的存取属性运算符是“[]”,而不是“.”。使用“[]”来命名属性名师字符串值,是动态的,可以在运行时改变,而不是一个标识符“.”。

例:

var stock_name= get_stock_name_from_user();//从用户处获取股票名
  var share= get_number_of_shares();//得到股票数量
  portfolio[stock_name]= share;//动态地创建数组股票,并为每支股票赋值
  将该例子与for/in循环一起使用,当用户输入了他的投资组合,可以计算当前总值
  var value= 0;
  for (stock in portfolio) {
    value +=get_share_value(stock)*portfolio[stock];
  }

stock存取的是每支股票的名字。     

portfolio[stock]存取的是每支股票的数量。

for-in循环

功能:遍历对象属性,把属性名和属性值都提出来

var obj = {
 "key1":"value1",
 "key2":"value2",
 "key3":"value3"
};
function EnumaKey(){
 for(var key in obj ){
  alert(key);
 }
}
function EnumaVal(){
 for(var key in obj ){
  alert(obj[key]);
 }
}
EnumaKey(obj)
//key1 key2 key3
EnumaVal(obj)
//value1 value2 value3

数组也可以这样遍历,但不推荐,因为不能保证顺序,而且如果在Array的原型上添加了属性,这个属性也会被遍历出来。

for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”。

从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的。因为如果数组对象已被自定义的功能增强,就可能发生逻辑错误。另外,在for-in中,属性列表的顺序(序列)是不能保证的。所以最好数组使用正常的for循环,对象使用for-in循环。

Javascript 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
分享Javascript实用方法二
Dec 13 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
简单实现js页面切换功能
Jan 10 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
js实现简单页面全屏
Sep 17 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
JS实现的自定义右键菜单实例二则
Sep 01 #Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 #Javascript
jquery常用函数与方法汇总
Sep 01 #Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 #Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 #Javascript
You might like
php eval函数用法总结
2012/10/31 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
使用Modello编写JavaScript类
2006/12/22 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
python写日志封装类实例
2015/06/28 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python实现任意位置文件分割的实例
2018/12/14 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
python绘制直方图和密度图的实例
2019/07/08 Python
tornado+celery的简单使用详解
2019/12/21 Python
Python使用type动态创建类操作示例
2020/02/29 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
2014年五四青年节活动策划书
2014/04/22 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
十个Python自动化常用操作,即拿即用
2021/05/10 Python
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB