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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
基于opencv实现简单画板功能
2020/08/02 Python
python不同版本的_new_不同点总结
2020/12/09 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
元旦促销方案
2014/03/15 职场文书
3分钟演讲稿
2014/04/30 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
python字典的元素访问实例详解
2021/07/21 Python
Python字符串的转义字符
2022/04/07 Python
MySQL 条件查询的常用操作
2022/04/28 MySQL
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL