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 上下滚动广告
Jun 17 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
vue实现公共方法抽离
Jul 31 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 中文处理函数集合
2008/08/27 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
顶岗实习接收函
2014/01/09 职场文书
男性健康日的活动方案
2014/08/18 职场文书
初中毕业生感言
2015/07/31 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python