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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery实现容器间的元素拖拽功能
Dec 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
IE bug table元素的innerHTML
2010/01/11 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
Python列表删除的三种方法代码分享
2017/10/31 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Python requests库用法实例详解
2018/08/14 Python
Python 忽略warning的输出方法
2018/10/18 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
一个SQL面试题
2014/08/21 面试题
旷课检讨书500字
2014/10/14 职场文书
博士生专家推荐信
2015/03/25 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
python中数组和列表的简单实例
2022/03/25 Python
使用Python开发冰球小游戏
2022/04/30 Python