js/jquery遍历对象和数组的方法分析【forEach,map与each方法】


Posted in jQuery onFebruary 27, 2019

本文实例讲述了js/jquery遍历对象和数组的方法。分享给大家供大家参考,具体如下:

JS forEach方法

arr[].forEach(function(value,index,array){
//do something
})
  • 参数:value数组中的当前项,index当前项的索引,array原始数组;
  • 数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
  • 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是可以自己通过数组的索引来修改原来的数组;
var arr = [12,23,24,42,1];
var res = arr.forEach(function (item,index,input) {
  input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->[120,230,240,420,10]; 通过数组索引改变了原数组

JS map方法

arr[].map(function(value,index,array){
//do something
})
  • 参数:value数组中的当前项,index当前项的索引,array原始数组;
  • 区别:map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);
var arr = [12,23,24,42,1];
var res = arr.map(function (item,index,input) {
  return item*10;
})
console.log(res);//-->[120,230,240,420,10]; 原数组拷贝了一份,并进行了修改
console.log(ary);//-->[12,23,24,42,1]; 原数组并未发生变化

jQuery $.each方法

$.each(arr, function(index,value){
//do something
})
  • 参数:arr要遍历的数组,index当前项的索引,value数组中的当前项
  • 第1个和第2个参数正好和以上两个函数是相反的,注意不要记错了
var arr = [12,23,24,42,1];
$.each(arr, function (index,item) {
  console.log(index) // 0 1 2 3 4
  console.log(item) // 12 23 24 42 1
})

参考:
https://3water.com/article/81955.htm
https://3water.com/article/84609.htm

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

jQuery 相关文章推荐
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 #jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 #jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 #jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 #jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 #jQuery
You might like
我用php+mysql写的留言本
2006/10/09 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
PHP最常用的正则表达式
2017/02/13 PHP
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
简单的js计算器实现
2016/10/26 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
Python3解释器知识点总结
2019/02/19 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
如何理解python对象
2020/06/21 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
六道php面试题附答案
2014/06/05 面试题
客户表扬信范文
2014/01/10 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
护理专业求职信
2014/06/15 职场文书
医院合作协议书
2014/08/19 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis