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 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
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 form 表单传参明细研究
2009/07/17 PHP
php开发环境配置记录
2011/01/14 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
在视频前插入广告
2006/11/20 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
JS中的三个循环小结
2017/06/20 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
python三元运算符实现方法
2013/12/17 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python实现自动登录后台管理系统
2018/10/18 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
C++面试题目
2013/06/25 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
对标管理实施方案
2014/03/12 职场文书
2014年纠风工作总结
2014/12/08 职场文书
文明单位申报材料
2014/12/23 职场文书
学术会议通知范文
2015/04/15 职场文书
讲文明倡议书
2015/04/29 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript