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 相关文章推荐
javascript编程起步(第七课)
Jan 10 Javascript
cssQuery()的下载与使用方法
Jan 12 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
如何利用js在两个html窗口间通信
Apr 27 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
写一个用户在线显示的程序
2006/10/09 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
详解参数传递四种形式
2015/07/21 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
JS之相等操作符详解
2016/09/13 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
从vue源码看props的用法
2019/01/09 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
Python实现翻转数组功能示例
2018/01/12 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Ruby如何定义一个类
2012/10/08 面试题
护理专业的自荐信
2013/10/22 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
党校学习心得体会范文
2014/09/09 职场文书
党员评议思想汇报
2014/10/08 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2014年度思想工作总结
2014/11/27 职场文书
中秋节寄语2015
2015/03/24 职场文书
大学校园招聘会感想
2015/08/10 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python