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 相关文章推荐
原生javascript兼容性测试实例
Jul 01 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
用React Native制作一个简单的游戏引擎
May 27 Javascript
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
模拟xcopy的函数
2006/10/09 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
小程序实现密码输入框
2020/11/16 Javascript
详解Python中的strftime()方法的使用
2015/05/22 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
django如何自己创建一个中间件
2019/07/24 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
普天C++笔试题
2016/03/20 面试题
伊琍体标语
2014/06/25 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python