JS中forEach()、map()、every()、some()和filter()的用法


Posted in Javascript onMay 11, 2022

前言

在文章开头,先问大家一个问题:

在Javascript中,如何处理数组中的每一项数据?

有人可能会说,这还不简单,直接一个for循环遍历一下就好了。

是的,确实,这是最常见的做法。

但是,除此之外,ES5还提供了处理数组更加方便的方法,如题。

接下来,我将通过几个简单的实例来具体讲解这几个方法。

一、forEach(),用于遍历数组,无返回值

这里先给出一个数组(以下例子通用):

var arr = [1,-2,3,4,-5];

然后我要做事情的就是,将数组中的每一项翻倍。

arr.forEach(function(item,index,array){
    array[index] = item * 2;
});
console.log(arr);   // [2,-4,6,8,-10]

可以看到,forEach()可以传入一个匿名函数作为参数,而该匿名函数有含有三个参数,其依次代表数组遍历时的当前元素item,数组遍历时的当前元素的索引index,以及正在遍历的数组array。有了这三个参数,可以方便我们做很多事情,比如说示例当中将每一项数组元素翻倍,这时需要用到第一个参数item。但是,仅仅只是将item乘以2可不行,我们还得将其赋值给原来的数组,这时我们就得用到后面两个参数index和array。

根据上述可知,array[index]是全等于item的。

arr.forEach(function(item,index,array){
    console.log(array[index] === item);   // true
});

二、map(),用于遍历数组,返回处理之后的新数组

var newArr = arr.map(function(item,index,array){
    return item * 2;
});
console.log(newArr);   // [2,-4,6,8,-10]

可以看到,该方法与forEach()的功能类似,只不过map()具有返回值,会返回一个新的数组,这样处理数组后也不会影响到原有数组。

三、every(),用于判断数组中的每一项元素是否都满足条件,返回一个布尔值

var isEvery = arr.every(function(item,index,array){
    return item > 0;
});
console.log(isEvery);   // false

可以看到,示例中是要判断数组arr中的元素是否都为正数,很显然不是,所以该方法最终返回false。

四、some(),用于判断数组中的是否存在满足条件的元素,返回一个布尔值

var isSome = arr.some(function(item,index,array){
    return item < 0;
});
console.log(isSome);   // true

可以看到,该方法与every()类似,示例中是要判断数组arr中是否存在负数元素,很显然存在,所以该方法最终返回true。

五、filter(),用于筛选数组中满足条件的元素,返回一个筛选后的新数组

var minus = arr.filter(function(item,index,array){
    return item < 0;
});
console.log(minus);   // [-2, -5]

可以看到,示例中是要筛选出数组arr中的所有负数,所以该方法最终返回一个筛选后的新数组[-2, -5]。

补充: 以上五大方法除了传递一个匿名函数作为参数之外,还可以传第二个参数,该参数用于指定匿名函数内的this指向,例如:

// 只传一个匿名函数
arr.forEach(function(item,index,array){
    console.log(this);  // window
});
// 传两个参数
arr.forEach(function(item,index,array){
    console.log(this);  // [1, -2, 3, 4, -5]
},arr);

兼容性: 由于以上方法均属ES5方法,所以IE8及其以下浏览器均不兼容。

补充小结:

map():有返回值,可以return出来

forEach():没有返回值

filter():返回一个符合func条件的元素数组(并没有改变原数组)

some():返回一个boolean,判断是否有元素是否符合func条件(有一个就行)(并没有改变原数组)

every():返回一个boolean,判断每个元素是否符合func条件(所有都判断)(并没有改变原数组)

重点总结:

① forEach()无返回值,map()和filter()返回新数组,every()和some()返回布尔值
② 匿名函数中this指向默认为window,可通过传第二参数来更改之
③ 五种遍历方法均为ES5方法

总结

到此这篇关于JS中forEach()、map()、every()、some()和filter()用法的文章就介绍到这了!

Javascript 相关文章推荐
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
JavaScript中reduce()的用法
May 11 #Javascript
处理canvas绘制图片模糊问题
介绍一下28个JS常用数组方法
May 06 #Javascript
VUE解决跨域问题Access to XMLHttpRequest at
js判断两个数组相等的5种方法
May 06 #Javascript
vue使用watch监听属性变化
Apr 30 #Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
You might like
php 执行系统命令的方法
2009/07/07 PHP
php 字符串函数收集
2010/03/29 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
js实现移动端轮播图
2020/12/21 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
节能环保标语
2014/06/12 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
追悼会答谢词
2015/01/05 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
2015年售票员工作总结
2015/04/29 职场文书
信用卡工资证明范本
2015/06/19 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android