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 相关文章推荐
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
利用d3.js实现蜂巢图表带动画效果
Sep 03 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
收音机术语解释
2021/03/01 无线电
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
Json序列化和反序列化方法解析
2013/12/19 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
js数据类型检测总结
2018/08/05 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python找出9个连续的空闲端口
2016/02/01 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
Python configparser模块常用方法解析
2020/05/22 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
自动化专业本科毕业生求职信
2013/10/20 职场文书
20年同学聚会感言
2014/02/03 职场文书
小学英语教学反思案例
2014/02/04 职场文书
小小商店教学反思
2014/04/27 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书