JavaScript中循环遍历Array与Map的方法小结


Posted in Javascript onMarch 12, 2016

js循环数组各种方法
eg1:

for (var i = 0; i < myStringArray.length; i++) { 
 alert(myStringArray[i]); 
 //Do something 
}

eg2:

Array.prototype.foo = "foo!"; 
var array = ['a', 'b', 'c']; 
 
for (var i in array) { 
 alert(array[i]); 
} 
 
for(var i in this.$GLOBAL_DETAIL.album_photo_ids){if(this.$GLOBAL_DETAIL.album_photo_ids[i] == "3487675024077108") alert(this.$GLOBAL_DETAIL.album_photo_ids[i]);}

eg3:

[1,2,3,4].map( function(item) { 
   alert(item); 
})

eg4:

var x = [1,2,3,4].map( function(item) { return item * 10; } ); 
 
// And now x is [10,20,30,40]

eg5:

var myStringArray = [ "Hello", "World" ] 
var len = myStringArray.length 
for (var i=0; i<len; ++i) { 
 if (i in myStringArray) { 
 var s = myStringArray[i]; 
 ... do something with s ... 
 } 
}

eg6:

var myStringArray = [ "Hello", "World" ] 
myStringArray.forEach( function(s) { 
  ... do something with s ... 
} )

eg7:

var i=0,item,items = ['one','two','three']; 
while(item=items[i++]){ 
 console.log(item); 
} 
 
// logs: 'one','two','three' 
 
and for the reverse order, an even more efficient loop 
var items = ['one','two','three'], i=items.length; 
while(i--){ 
 console.log(items[i]); 
} 
 
// logs: 'three','two','one' 
 
or the classical for loop 
var items = ['one','two','three'] 
for(var i=0,l=items.length; i < l ; i++){ 
 console.log(items[i]); 
} 
 
// logs: 'one','two','three'

eg8:

var myStringArray = ['Hello', 'World']; // array uses [] not {} 
for (var i in myStringArray) { 
 console.log(i + ' -> ' + myStringArray[i]); // i is the index/key, not the item 
}

js循环map,获取所有的key和value
eg1:

//Page地址 
 pageUrl : { 
  menu   : "loadPage.htm?url=/collect/menu.page",   // 进入菜单页面 
  guangfaPage  : "loadPage.htm?url=/collect/menu.page",   // 进入广发信息收集页面 
  pinganPage  : "loadPage.htm?url=/collect/menu.page",   // 进入平安信息收集页面 
  nuonuoPage  : "loadPage.htm?url=/collect/menu.page",   // 进入诺诺信息收集页面 
  youbangPage  : "loadPage.htm?url=/collect/menu.page",   // 进入友邦信息收集页面 
  inputMobileNo : "loadPage.htm?url=/collect/inputMobileNo.page", // 进入输入手机号页面 
  readIdCard  : "loadPage.htm?url=/collect/readIdCard.page",  // 进入读取身份证页面 
  member   : "loadPage.htm?url=/collect/member.page",   // 进入输入会员卡号页面 
  bankCard  : "loadPage.htm?url=/collect/bankCard.page",   // 进入插入银行卡页面 
  url   : "loadPage.htm?url=/collect/url.page"    // 进入跳转url页面 
 }, 
 
for(var key in this.pageUrl){ 
 alert(key+" : "+this.pageUrl[key]); 
}

eg2:

var obj = { 
 "a": 1, 
 "b": 2, 
 "c": 3 
}; 
 
for (var prop in obj) { 
 if (obj.hasOwnProperty(prop)) { 
 // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety... 
 alert("prop: " + prop + " value: " + obj[prop]) 
 } 
}

双重Map循环
eg:

var msg = ""; 
for(var key in Pin) { 
 for(var i in Pin[key]){ 
 msg+=i+": "+Pin[key][i]+"\n"; 
 } 
} 
alert(msg);
Javascript 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
jsonp跨域请求详解
Jul 13 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
Node.js的Express框架使用上手指南
Mar 12 #Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 #Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 #Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 #Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 #Javascript
原生JavaScript制作微博发布面板效果
Mar 11 #Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 #Javascript
You might like
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
python安装与使用redis的方法
2016/04/19 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Python实现分数序列求和
2020/02/25 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
区分python中的进程与线程
2020/08/13 Python
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
教师教学评估方案
2014/05/09 职场文书
Python matplotlib多个子图绘制整合
2022/04/13 Python