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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
JavaScript 数组详解
Oct 10 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
vue时间格式化实例代码
Jun 13 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 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
PHP开发文件系统实例讲解
2006/10/09 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
实例解析Array和String方法
2016/12/14 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python基于requests库爬取网站信息
2020/03/02 Python
python接入支付宝的实例操作
2020/07/20 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
Champion官网:美国冠军运动服装
2017/01/25 全球购物
中职应届生会计求职信
2013/10/23 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫