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操纵Cookie实现购物车程序
Feb 15 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
获取3个数组不重复的值的具体实现
Dec 30 Javascript
Jquery 效果使用详解
Nov 23 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
JS代码实现页面切换效果
Jan 10 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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
js实现漫天星星效果
2017/01/19 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python IDLE入门简介
2017/12/08 Python
Python3进制之间的转换代码实例
2019/08/24 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
给客户的道歉信
2014/01/13 职场文书
倡议书格式范文
2014/04/14 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
四风对照检查材料范文
2014/09/27 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python