讲师中心 微信公众号
AI工具推荐 视频效率加速

es6中迭代数组的方法有哪些

云婷酱_2626

云婷酱_2626

发布时间:2022-10-18 17:24:01

|

1768人浏览过

|

来源于php中文网

原创

迭代方法:1、map,用于根据某种规则映射数组,得到映射之后的新数组;2、filter,用于根据判断的条件,进行元素筛选;3、forEach,相当于使用for循环遍历数组;4、some,用于判断数组中是否有满足条件的元素;5、every,用于判断数组中是否所有元素都满足条件;6、findIndex,用于找元素下标;7、reduce,可遍历数组元素,为每一个元素执行一次回调函数。

es6中迭代数组的方法有哪些

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

Array应该是es6中最常用的类型了,它和其他语言中的数组一样也是一组有序的数据,但是不同的是,ECMAscript数组中数组的每个槽位可以储存任意类型的数据,意思就是说,我们可以在第一个槽位中储存字符串,第二个是数值,第三个是对象。而ECMAscript数组中最常使用的就是迭代方法,下面为大家详细介绍一下。

ES6数组的7种迭代方法

1、map()方法

对数组每一项都传入运行函数,返回由每次函数调用的结果构成的数组。

作用: 根据某种规则映射数组,得到映射之后的新数组

应用场景:

  • (1)数组中所有的元素 * 0.8 

  • (2)将数组中的js对象,映射成 html字符串

示例:

 const arr = [10,20,30,40,50]
  // 完整写法
  // let res = arr.map((item,index)=>{
  //     return item * 0.8
  //   })
  // 熟练写法
   let res = arr.map(item=>item*0.8)
    console.log(res)
  // 返回处理后的新数组   [8, 16, 24, 32, 40]

1.png

2、filter()方法

对数组每一项都传入运行函数,函数返回true的项会组成数组之后返回。

作用:根据判断的条件,进行筛选。

应用场景:

  • (1)筛选数组中的偶数 

  • (2)商品价格筛选

示例:

 //需求: 筛选数组里的偶数
    const arr = [10,20,33,44,55]
    // let res =  arr.filter(item=>{
    //   if(item % 2 == 0){
    //     return true
    //   } else{
    //     return false
    //   }
    // })
    // console.log(res)
    let res1 = arr.filter(item => item % 2==0)
    console.log(res1) // [10, 20, 44]

2.png

3、forEach()方法

对数组每一项都传入运行函数,没有返回值。

作用:相当于 for循环另一种写法

应用场景:遍历数组

示例:

 // 类似for循环遍历
      const arr = [13,22,10,55,60]
      arr.forEach((item,index)=>{
        console.log(item,index)
        // item->数组里每一个元素
        // index->对应的下标
      })

3.png

4、some()方法

对数组每一项都传入运行函数,若有一项函数返回true,则这个方法返回true。

作用:判断数组中是否有满足条件的元素 (逻辑或 ||, 有任意一个满足即可)

应用场景:

  • (1)判断数组中有没有奇数  

  • (2)非空判断 : 判断表单数组中,有没有元素value为空

示例:判断是否有奇数

javascript-pro
javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家,适用于现代开发

下载
 // 判断是否有奇数
    const arr = [10,20,30,40,50]
  //  let res =  arr.some(item=>{
  //     if(item % 2 == 1){
  //       return true
  //     } else{
  //       return false
  //     }
  //   })
    let res = arr.some(item =>item % 2 == 1)
    console.log(res)
   //  true: 有满足条件的元素
   //  false: 没有满足条件的元素

4.png

5、every()方法

对数组每一项都传入运行函数,若每一项都返回true,则这个方法为true。

作用:判断数组中是否 所有元素 都满足条件 (逻辑&&, 全部满足)

应用场景: 

  • (1)判断数组中是否所有元素都是 偶数

  •  (2)开关思想 : 购物车是否全选

示例:判断是否全是偶数

 // 判断是否全是偶数
      const arr = [10,20,30,40,50]
  //  let res =  arr.some(item=>{
  //     if(item % 2 == 1){
  //       return true
  //     } else{
  //       return false
  //     }
  //   })
    let res = arr.every(item =>item % 2 == 0)
    console.log(res)
   // true: 所有满足都满足条件
   // false: 有元素不满足条件

5.png

6、findIndex()方法

作用:找元素下标

应用场景:

  • (1)如果数组中是值类型,找元素下标用: arr.indexOf( 元素 )

  • (2)如果数组中是引用类型,找元素下标: arr.findIndex( )

示例:

 /*
     arr.findIndex()查询数组下标
      如果找到目标元素,则返回改数组的下标
      如果没找到,则返回固定值-1
      */
    let arr = [
      {name:'李四',age:20},
      {name:'王五',age:20},
      {name:'张三',age:20},
    ]
 
  let index = arr.findIndex(item=>item.name == '王五')
  console.log(index)

6.png

7、reduce()方法

作用:遍历数组元素,为每一个元素执行一次回调函数

应用场景:数组求和/平均值/最大值/最小值

示例:

 const arr = [10,20,30,40,50]
   let res =  arr.reduce((sum,item,index)=>{
      return sum + item
      // console.log(sum,item,index)
    },0)

7.png

方法的区别与细节

every()和some()

这些方法中,every()和some()是最相似的,都是从数组中搜素符合某个条件的元素。对every()来说,传入的参数必须对每一项都返回true,它才会返回true。而对于some()来说,只要有一项让传入的函数返回true,它就返回true,下面举个例子:

let numbers = [2,1,4,3,5,4,3];

let everyResult = numbers.every((item,index,array) => item >2);
console.log(everyResult);  // false

let someResult = numbers.some((item,index,array) => item >2);
console.log(someResult);  // true

filter()方法

这个方法基于给定的函数来决定每一项是否应该包含在它返回的数组中。例如:

let numbers = [2,1,4,3,5,4,3];
let filterResult = numbers.filter((item,index,array) => item >2);
console.log(filterResult);  // 4,3,5,4,3

这里filter返回的数组包含了4,3,5,4,3,因为只有对这些项传入的函数才返回 true,这个方法非常适合从数组中筛选满足给定条件的元素,也是非常常用的迭代方法。

map()

map()方法也是返回一个数组。这个数组的每一项都是对原始数组中同样位置的元素运行传入函数而返回的结果,例如,可以将数组中的每一项都乘以2,并返回包含所有结果的数组,如下:

let numbers = [2,1,4,3];
let mapResult = numbers.map((item,index,array) => item *2);
console.log(mapResult);  // 4,2,8,6

这个方法返回的数组包含了原始数组中每给数值乘以2的结果。这个方法很适应于创建一个与原数组一一对应的新数组。

forEach()

最后看一看forEach这个方法,这个方法只会对每一项运行传入的函数,没有返回值。其实,本质上,forEach()方法相当于使用for循环遍历数组。例如:

let numbers = [2,1,4,3];
numbers.forEach((item,index,array) => {
console.log(item)
}); // 2,1,4,3

【相关推荐:javascript视频教程、编程视频】

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

相关专题

更多
Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

20

2026.10.28

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

0

2026.10.28

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

0

2026.10.28

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

120

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

60

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

60

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

40

2026.10.22

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

60

2026.10.22

Golangci-lint配置文件与规则设置
Golangci-lint配置文件与规则设置

本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。

20

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn