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 相关文章推荐
js操作iframe的一些方法介绍
Jun 25 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python中模块string.py详解
2017/03/12 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
基于keras中的回调函数用法说明
2020/06/17 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
园林施工员岗位职责
2013/12/11 职场文书
中班中秋节活动反思
2014/02/18 职场文书
行政副总岗位职责
2014/02/23 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
党建目标管理责任书
2014/07/25 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
采购员岗位职责范本
2015/04/07 职场文书
预备党员半年考察意见
2015/06/01 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技