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 相关文章推荐
jQuery中需要注意的细节问题小结
Dec 06 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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用GD库生成高质量的缩略图片
2011/03/09 PHP
joomla组件开发入门教程
2016/05/04 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python删除文本中行数标签的方法
2018/05/31 Python
python中 * 的用法详解
2019/07/10 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
Python简易版停车管理系统
2019/08/12 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
使用python模拟高斯分布例子
2019/12/09 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
通过cmd进入python的步骤
2020/06/16 Python
Python如何绘制日历图和热力图
2020/08/07 Python
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
教师职称自我鉴定
2014/02/12 职场文书
投资合作协议书范本
2014/04/17 职场文书
《赶海》教学反思
2014/04/20 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
贷款收入证明格式
2015/06/24 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
基于Python编写一个监控CPU的应用系统
2022/06/25 Python