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 24 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery实现日历效果
Sep 11 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版(3)
2006/10/09 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
jquery cookie插件代码类
2009/05/26 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
python爬虫基本知识
2018/03/05 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
十八届三中全会感言
2014/03/10 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
追讨欠款律师函
2015/05/27 职场文书
电影复兴之路观后感
2015/06/02 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers
MySQL数据库查询之多表查询总结
2022/08/05 MySQL