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定义类和对象的几种方式
Nov 09 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
Js跳出两级循环方法代码实例
Sep 22 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
php 常用的系统函数
2017/02/07 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python合并多个装饰器小技巧
2015/04/28 Python
python实现决策树分类
2018/08/30 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
大学生个人求职信范文
2013/09/21 职场文书
求职信标题怎么写
2014/05/26 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技