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 相关文章推荐
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
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
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
子页向父页传值示例
2013/11/27 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
python实现图片处理和特征提取详解
2017/11/13 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
sklearn的predict_proba使用说明
2020/06/28 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
第一书记观后感
2015/06/08 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫