前言:关于 JS 中为数组定义的迭代方法,我最开始是在《JavaScript高级程序设计》中学习的,然后。。。我并没有看懂,后来翻阅各个大佬的博客,稍微理解了那么一丢丢。以下就是我的一点见解。

首先,我们需要知道数组中的迭代方法都有哪些,列举出来分别是:every、some、filter、map、forEach、reduce。

其中 every、some、filter、map、forEach 五种方法在传入时函数会接受三种参数,分别是 item(数组中项的值)、index(项的索引)、array(数组自身)。我在下面的案例中都只传入了两个值,原因是。。。用不到(其实是懒得写)

而 reduce 方法则会接受四个参数,分别是 prev(前一个项)、cur(当前项)、index(项的索引)、array(数组对象),函数中返回的任何值都会作为第一个参数传给下一项,函数的迭代是在数组的第二项开始的。

1.every ------- 查询数组中的每一项是否满足条件

var num = [1,2,3,4,5];
var number = num.every(function(item,index){
return (item > 3); //判断传入的值是否全部都大于3
})
console.log(number); //false 有一个不满足即为false

2.some ------- 查询数组中的每一项哪些满足条件

var num = [1,2,3,4,5];
var number = num.some(function(item,index){
return (item > 3); //判断传入的值哪些项大于3
})
console.log(number); //true 满足一个即可为true

3.filter ------ 筛选符合条件的项,组成新数组

var num = [1,2,3,4,5];
var number = num.filter(function(item,index){
return (item > 3); //判断传入的值哪些项大于3
})
console.log(number); //[4,5]

4.map ------ 数组中的项通过计算,组成新数组

var num = [1,2,3,4,5];
var number = num.map(function(item,index){
return item * 3; //传入的数值都乘以3
})
console.log(number); //[3,6,9,12,15]

5.forEach ------ 传入数组中的每一项

var num = [1,2,3,4,5];
var number = num.forEach(function(item,index){
console.log(item); // 1 2 3 4 5
})

关于 forEach 我再多叨叨几句,这个方法在本质上与 for 循环没有什么区别。上面提到过,每个方法都会传入三个参数,那么我在输出时传入第一项,也就是输出数组中的每一项。如果传入第二项,则是循环迭代数组的 index 下标值,如果传入第三项,则是循环迭代整个 num 数组。

6.reduce ------ 数组的前项和后项进行累计值计算

var num = [1,2,3,4,5];
var number = num.reduce(function(prev,cur,index){
return prev + cur;
})
console.log(number); // 1+2+3+4+5 = 15 本质上就是数组中的项 累计运算的过程

JavaScript 之迭代方法的更多相关文章

  1. JavaScript数据迭代方法差别

    js有很多总接待方法,ES6之后又新增了几个: 这里主要讨论数组迭代遍历的方法所以不会细讲for...in... ES5.ES6数组迭代方法有: forEach map filter some eve ...

  2. 松软科技web课堂:JavaScript 数组迭代方法

    数组迭代方法对每个数组项进行操作,听着挺高深,其实,就是对数组对象一次性逐一进行一种操作的一种叫法.(文章来源:www.sysoft.net.cn,加v:15844800162深度交流) Array. ...

  3. JavaScript五中迭代方法小解

    ECMAScript 为数组定义了五个迭代方法.每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this的值.传入这些方法中的函数会接收三个参数:数组项的值.该 ...

  4. javaScript 数组迭代方法

    map 方法 解释:map即映射,返回对每项操作后组成的新数组 let arr=[1,2,3,4,5,6,7,8]; let newArr=arr.map((item)=>{ if(item&g ...

  5. javascript——迭代方法

    <script type="text/javascript"> //五个迭代方法 都接受两个参数:要在每一项上运行的函数 和 运行该函数的作用域(可选) //every ...

  6. Javascript数组系列三之迭代方法2

    今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们 ...

  7. Javascript数组系列二之迭代方法1

    我们在<Javascript数组系列一之栈与队列 >中介绍了一些数组的用法.比如:数组如何表现的和「栈」一样,用什么方法表现的和「队列」一样等等一些方法,因为 Javascript 中的数 ...

  8. 一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some

    好吧,竟然不能单发一张图,不够200字啊不够200字! 在<JavaScript高级程序设计>中,分门别类介绍了非常多数组方法,其中迭代方法里面有6种,这6种方法在实际项目有着非常广泛的作 ...

  9. JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of

    JavaScript中有非常多数组迭代方法,这里基本上吧所有的都介绍全了,我项目中比较喜欢的是forEach. 7.for in (for-in循环实际是为循环对象而设计的,for in也可以循环数组 ...

随机推荐

  1. WPF应用程序的启动画面[Splash Screen本质分析]

    原文:WPF应用程序的启动画面[Splash Screen本质分析] 不经意间发现了wpf的这个小玩意,感觉蛮有意思的.我在项目中添加了一张图片 如图: wpf-1.JPG(10.73 K) 2010 ...

  2. 用蓝牙连接debian和诺基亚手机

    本方法已经用debian 4.0.诺基亚9300和一个hl-united牌子的USB蓝牙适配器测试过了,效果很好.             1.安装必要的软件包:   #apt-get install ...

  3. 微信小程序实战之天气预报

    原文:微信小程序实战之天气预报 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市.值得注意的是100%这个设置好像已经不好使了,可 ...

  4. 正则表达式-Csharp

    原文:正则表达式-Csharp 学习笔记:正则表达式 一. 正则表达式 正则表达式(Regex)是用来进行文本处理的技术,是语言无关的,在几乎所有语言中都有实现. 一个正则表达式就是由普通的字符及特殊 ...

  5. UWP-磁贴初识

    原文:UWP-磁贴初识 简单的磁贴内容实现,来自 Bob 的视频. 为一个按钮添加点击事件,来更新磁贴. private void ChangeTileContentButton_Click(obje ...

  6. 在Windows IoT上使用网络摄像头

    在树莓派上可以使用它官方标配的摄像头,但是这个摄像头似乎不能被Windows IoT识别和使用.但是,可以在树莓派的USB口上插入任意型号的摄像头,就可以实现树莓派的拍摄功能. 关于摄像头的寻找和拍摄 ...

  7. 知识的内化:学习、实践、输出(与Focus Feedback FixIt的原理是一致的)

    一个人的能力分三个层次: 资源,比如知识.技能.经验.时间.精力.金钱.人脉等 应用流程,即使用资源解决问题的能力,包括做事的方法.流程.策略等,它是你整合应用资源创造价值的能力. 价值取向,即你觉得 ...

  8. qt获取网络ip地址的类

    最近在学习qt网络编程,基于tcp和udp协议. 看了一些别人的程序和qt4自带的例子,困扰我最大的问题就是获取ip的类,总结起来还挺多的. 主要介绍常用的QtNetwork Module中的QHos ...

  9. Flask学习之旅--数据库

    一.写在前面 在Web开发中,数据库操作是很重要的一部分,因为网站的很多重要信息都保存在数据库之中.而Flask在默认情况下是没有数据库.表单验证等功能的,但是可以用Flask-extension为W ...

  10. SpringBoot自定义注解@YamlPropertySource加载yml或者yaml文件(扩展了@PropertySource)

    1:概述 SpringBoot的@PropertySource注解只支持加载 properties结尾的文件.当使用@ConfigurationProperties 注解配合@EnableConfig ...