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 相关文章推荐
简单实用jquery版三级联动select示例
Jul 04 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
js实现简易计算器功能
Oct 18 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
微信小程序反编译的实现
Dec 10 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下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
PHP 透明水印生成代码
2012/08/27 PHP
解析PHP提交后跳转
2013/06/23 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
利用Python如何生成随机密码
2016/04/20 Python
Python在线运行代码助手
2016/07/15 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python 日志 logging模块详细解析
2020/03/31 Python
what is the difference between ext2 and ext3
2013/11/03 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
运动会新闻报道稿
2015/07/22 职场文书
创业计划书之美甲店
2019/09/20 职场文书