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 相关文章推荐
一个基于jquery的图片切换效果
Jul 06 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
js表头排序实现方法
Jan 16 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
JavaScript 常见的继承方式汇总
Sep 17 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/06/08 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
小学生开学感言
2014/02/28 职场文书
质量提升方案
2014/06/16 职场文书
接收函
2019/04/22 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android