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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
Vue实现简单购物车功能
Dec 13 Vue.js
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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php模拟post提交数据的方法
2015/02/12 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python实现按任意键继续执行程序
2016/12/30 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Opencv求取连通区域重心实例
2020/06/04 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
大学毕业通用个人的求职信
2013/12/08 职场文书
团日活动总结报告
2014/06/25 职场文书
初中政教处工作总结
2015/08/12 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
四年级数学教学反思
2016/02/16 职场文书
MySQL查询日期时间
2022/05/15 MySQL