JavaScript 之迭代方法
前言:关于 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 之迭代方法的更多相关文章
- JavaScript数据迭代方法差别
js有很多总接待方法,ES6之后又新增了几个: 这里主要讨论数组迭代遍历的方法所以不会细讲for...in... ES5.ES6数组迭代方法有: forEach map filter some eve ...
- 松软科技web课堂:JavaScript 数组迭代方法
数组迭代方法对每个数组项进行操作,听着挺高深,其实,就是对数组对象一次性逐一进行一种操作的一种叫法.(文章来源:www.sysoft.net.cn,加v:15844800162深度交流) Array. ...
- JavaScript五中迭代方法小解
ECMAScript 为数组定义了五个迭代方法.每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this的值.传入这些方法中的函数会接收三个参数:数组项的值.该 ...
- javaScript 数组迭代方法
map 方法 解释:map即映射,返回对每项操作后组成的新数组 let arr=[1,2,3,4,5,6,7,8]; let newArr=arr.map((item)=>{ if(item&g ...
- javascript——迭代方法
<script type="text/javascript"> //五个迭代方法 都接受两个参数:要在每一项上运行的函数 和 运行该函数的作用域(可选) //every ...
- Javascript数组系列三之迭代方法2
今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们 ...
- Javascript数组系列二之迭代方法1
我们在<Javascript数组系列一之栈与队列 >中介绍了一些数组的用法.比如:数组如何表现的和「栈」一样,用什么方法表现的和「队列」一样等等一些方法,因为 Javascript 中的数 ...
- 一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some
好吧,竟然不能单发一张图,不够200字啊不够200字! 在<JavaScript高级程序设计>中,分门别类介绍了非常多数组方法,其中迭代方法里面有6种,这6种方法在实际项目有着非常广泛的作 ...
- JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some、for in、for of
JavaScript中有非常多数组迭代方法,这里基本上吧所有的都介绍全了,我项目中比较喜欢的是forEach. 7.for in (for-in循环实际是为循环对象而设计的,for in也可以循环数组 ...
随机推荐
- 通通玩blend美工(7)——简约而不简单的块
原文:通通玩blend美工(7)--简约而不简单的块 最近在研发一个WPF快速开发框架,满脑子都是各种逻辑各种模式,写一篇比较休闲娱乐的博客,宣泄下我对美工的热爱. 我一直以来有意无意在手机应用或者各 ...
- WPF ListboxItem 双击事件 Command绑定
<ListBox x:Name="Lb" HorizontalAlignment="Left" Height="600" Vertic ...
- 拆分Codeigniter 数据库,独立提取
起因: codeigniter的activeRecord链式操作非常的方便,目前手头的项目用的不是CI,但是又想使用CI的数据库操作. 1. 新建文件夹 activeDB,内部目录如下 最 ...
- php 如何利用 soap调用.Net的WebService asmx文件
原文:php 如何利用 soap调用.Net的WebService asmx文件 最近,帮一个同行测试用.net写的WebService接口,C#调用通过,现在需要测试一下php版本对它的调用,经过各 ...
- Linux之文件的压缩与解压缩
压缩格式 .zip,.rar,.7z,.tar,.gz,.xz,.bz2,.tar.gz,.tar.xz,.tar.bz2,其中,形如*.tar.gz为tar打包,gz压缩的文件 zip压缩打包程序 ...
- 学在LINUX下编程(各种情况比较详细)
(from http://www.712100.com/bbs/redirect.php?fid=160&tid=191752&goto=nextnewset) 预备知识 用gcc ...
- VS2013编译Qt5.6.0静态库,并提供了百度云下载(乌合之众)good
获取qt5.6.0源码包 直接去www.qt.io下载就好了,这里就不详细说了. 这里是我已经编译好的** 链接:http://pan.baidu.com/s/1pLb6wVT 密码: ak7y ** ...
- Golang环境搭建,Notepad++配置Golang开发环境,Golang发送邮件
http://blog.csdn.net/u011012932/article/details/53102264 http://blog.csdn.net/u011012932/article/det ...
- Bitmap的读写和几个小儿科的滤镜效果~
闲来玩玩图像处理,拿破仑说过:“不想自己实现滤镜的美工不是好程序员~~#@!*^...#&!@......” 因为在学校做过很多美工的工作,而且从小就喜欢画画所以对图像相关的东西都还比较感兴 ...
- axios和vuex
0.babel 将es6代码转换成各个浏览器都能识别的代码 一.axios 1.官方网站 https://www.kancloud.cn/yunye/axios/234845 2.引用: (1)cdn ...