js中Array对象的常用遍历方法详解


Posted in Javascript onJanuary 17, 2019

1.forEach(),遍历数组的每个元素

let arrFor = ['muzi','digbig','muzidigbig','lucky']
  //forEach(),遍历数组的每个元素
  arrFor.forEach((item,index) => {
    console.log(`${index}---${item}`)
  })

2.map(参数为回调函数)函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新数组,原数组不变;

let arr = [{id:1,name:'muzi'},{id:2,name:'digbig'},{id:3,name:'muzidigbig'},{id:4,name:'lucky'}]
  const arrMap = arr.map((item,index) => {
    return {
      id:item.id,
      name:item.name,
      sex:'男'
    }
  })
  console.log(arrMap)

js中Array对象的常用遍历方法详解

3.filter(参数为回调函数)函数:过滤通过条件的元素组成一个新数组,原数组不变;

let arr = [{id:1,name:'muzi'},{id:2,name:'digbig'},{id:3,name:'muzidigbig'},{id:4,name:'lucky'}]
  const arrFilter = arr.filter((item,index) => {
    return item.id >= 2;
  })
  console.log(arrFilter)

js中Array对象的常用遍历方法详解

4.some(参数为回调函数)函数,遍历数组中是否有符合条件的函数,返回布尔值;

let arr = [{id:1,name:'muzi'},{id:2,name:'digbig'},{id:3,name:'muzidigbig'},{id:4,name:'lucky'}]
  const arrSome = arr.some((item,index) => {
    return item.id === 5
  })
  console.log(arrSome)

5.every(参数为回调函数)函数,遍历数组是否每个元素都符合条件,返回布尔值;

let arr = [{id:1,name:'muzi'},{id:2,name:'digbig'},{id:3,name:'muzidigbig'},{id:4,name:'lucky'}]
  const arrEvery = arr.every((item,index) => {
    return item.id >= 1
  })
  console.log(arrEvery)

6.find()函数,数组中的每个元素都执行这个回调函数;返回第一个满足条件的元素 之后的元素就不在调用;没有符合的返回undefined;并没有改变数组的原始值。

let arr = [{id:1,name:'muzi'},{id:2,name:'digbig'},{id:3,name:'muzidigbig'},{id:4,name:'lucky'}]
  const arrFind = arr.find((item,index) => {
    return item.id === 1
  })
  console.log(arrFind)

7.reduce(),合并二维数组

var twoArr = [['mu','zi'],['dig','big'],['lucky','jiji']];
  var oneArr = twoArr.reduce(function(total,currentValue){
    // console.log(total)
    return total.concat(currentValue);
  },[])
  console.log(oneArr);//["mu", "zi", "dig", "big", "lucky", "jiji"]

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 Javascript
vuex如何重置所有state(可定制)
Jan 17 #Javascript
node app 打包工具pkg的具体使用
Jan 17 #Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 #Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 #Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 #Javascript
vue权限管理系统的实现代码
Jan 17 #Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 #Javascript
You might like
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
PHP无限分类(树形类)
2013/09/28 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
python远程连接MySQL数据库
2019/04/19 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
施工安全协议书
2013/12/11 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
校运会班级霸气口号
2015/12/24 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
Python编写nmap扫描工具
2021/07/21 Python