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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 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
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
用javascript获取textarea中的光标位置
2008/05/06 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
python插入排序算法的实现代码
2013/11/21 Python
Python 文件操作的详解及实例
2017/09/18 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python使用folium excel绘制point
2019/01/03 Python
python__name__原理及用法详解
2019/11/02 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
python如何对链表操作
2020/10/10 Python
运动会开幕式邀请函
2014/01/22 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
年度考核个人总结
2015/03/06 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
Python如何加载模型并查看网络
2022/07/15 Python