前言:关于 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. uwp 获取系统字体库

    原文:uwp 获取系统字体库 效果图: 要获取到字体库首先要在 NuGet 添加 SharpDx.Direct2D1  api: /// <summary> /// 获取系统字体库列表 / ...

  2. winform实现DataGridView全选

    之前写过,一时想不起来就在网上找了一些.结果感觉好麻烦.于是就自己打开之前做过的功能.找到源码. private void CheckDatabasexuan() { DataGridViewChec ...

  3. 使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理

    原文:使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理 摘要 通过对博客文章的管理,实现外键操作. 目录[-] 八.博客文章管理 1.查看文章 2.添加博客        3 ...

  4. 微信小程序把玩(二十一)switch组件

    原文:微信小程序把玩(二十一)switch组件 switch开关组件使用主要属性: wxml <!--switch类型开关--> <view>switch类型开关</vi ...

  5. Android零基础入门第47节:自动完成文本框AutoCompleteTextView

    原文:Android零基础入门第47节:自动完成文本框AutoCompleteTextView 上一期学习的Spinner的使用,掌握的怎么样?本期一起来学习AutoCompleteTextView的 ...

  6. UWP入门(十二)--数据绑定用法

    原文:UWP入门(十二)--数据绑定用法 主要几个元素: Template DataTemplate ItemSource 数据绑定是一个数据提取的方法,能使数据和UI上的控件紧密相连,下面的Demo ...

  7. 多态与虚拟 : 物件导向的精髓 (侯捷在石器时代对OO的理解)

    [自序]虑而後能得(自序)故事接触 C++ 大约是 1989 年的事.那时候的 PC 以现在的眼光看,除了「蛮荒」之外没有更合适的形容词了.横扫千军的 Windows 3.0 还没有诞生,如今以 C+ ...

  8. Linux 桌面玩家指南:19. 深入理解 JavaScript,及其开发调试工具

    特别说明:要在我的随笔后写评论的小伙伴们请注意了,我的博客开启了 MathJax 数学公式支持,MathJax 使用$标记数学公式的开始和结束.如果某条评论中出现了两个$,MathJax 会将两个$之 ...

  9. c# winfrom 可折叠的树形控件

    首先需要一个可绑定实体 [Serializable] public class TreeNodeModel { private Image _nodePic; /// <summary> ...

  10. CTO的职责,以及Goolge内部流程

    我先做一下自我介绍,我是 2007 年加入的 Google,在 Moutain View 总部任 Google SRE,今年年初回国加入 Coding. 在 Google 我参与了两个 Project ...