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 23 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
[JS]点出统计器
2020/10/11 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
深入理解javascript中的this
2021/02/08 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python中pycurl库的用法实例
2014/09/30 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
对于Python中RawString的理解介绍
2016/07/07 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
浅谈python 类方法/静态方法
2020/09/18 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
奥巴马就职演讲稿
2014/05/15 职场文书
人力资源求职信
2014/05/25 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
肖申克救赎观后感
2015/06/02 职场文书