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 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
js判断节假日实例代码
Dec 27 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
JavaScript流程控制(循环)
Dec 06 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 图像函数大举例(非原创)
2009/06/20 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
Laravel5中contracts详解
2015/03/02 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
基于jQuery拖拽事件的封装
2020/11/29 jQuery
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
python实现多线程端口扫描
2019/08/31 Python
python中return如何写
2020/06/18 Python
Python如何读取、写入CSV数据
2020/07/28 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
新学期红领巾广播稿
2014/01/14 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python