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 checkbox,radio是否选中的判断代码
Mar 20 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
vue实现倒计时功能
Mar 24 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/11/25 PHP
PHP基础知识回顾
2012/08/16 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
js友好的时间返回函数
2016/08/24 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
材料采购员岗位职责
2013/12/17 职场文书
教育局长自荐信范文
2013/12/22 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
Go各时间字符串使用解析
2021/04/02 Golang