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 09 Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
Vue实现选择城市功能
May 27 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
JavaScript变量基本使用方法实例分析
Nov 15 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 中文和编码判断代码
2010/05/16 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php简单图像创建入门实例
2015/06/10 PHP
Yii清理缓存的方法
2016/01/06 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
就业协议书的作用
2014/04/11 职场文书
目标责任书范文
2014/04/14 职场文书
2014年售票员工作总结
2014/11/19 职场文书
大学生实习推荐信
2015/03/27 职场文书
小学教师教育随笔
2015/08/14 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
2016公务员年度考核评语
2015/12/01 职场文书