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实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jquery简易手风琴插件的封装
Oct 13 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图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
python妹子图简单爬虫实例
2015/07/07 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python生成器与迭代器详解
2019/01/01 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
环保倡议书怎么写
2014/05/16 职场文书
班级读书活动总结
2014/06/30 职场文书
升职自荐信范文
2015/03/27 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS