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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
javascript 树控件 比较好用
Jun 11 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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 PDO函数库详解
2010/04/27 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
vue实现购物车小案例
2019/09/27 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
JS如何生成动态列表
2020/09/22 Javascript
django rest framework vue 实现用户登录详解
2019/07/29 Python
python可以用哪些数据库
2020/06/22 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
护理个人求职信范文
2014/01/08 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
实验室标语
2014/06/21 职场文书
节能减耗标语
2014/06/21 职场文书
法人委托书
2014/07/31 职场文书
导游欢迎词范文
2015/01/23 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
南京南京观后感
2015/06/02 职场文书
在Python中如何使用yield
2021/06/07 Python
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
利用Redis实现点赞功能的示例代码
2022/06/28 Redis