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实现倒计时按钮的实现代码
Mar 23 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
React更新渲染原理深入分析
Dec 24 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
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
javascript常用的设计模式
2017/02/09 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
python3排序的实例方法
2020/10/20 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
结构和类有什么异同
2012/07/16 面试题
企划专员岗位职责
2013/12/09 职场文书
中介业务员岗位职责
2014/04/09 职场文书
作文评语大全
2014/04/23 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
2015年信访工作总结
2015/04/07 职场文书
导游词之阆中古城
2019/12/23 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
Python中requests库的用法详解
2022/06/05 Python
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python