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

目录
  • 前言
  • 一、forEach()，用于遍历数组，无返回值
  • 二、map()，用于遍历数组，返回处理之后的新数组
  • 三、every()，用于判断数组中的每一项元素是否都满足条件，返回一个布尔值
  • 四、some()，用于判断数组中的是否存在满足条件的元素，返回一个布尔值
  • 五、filter()，用于筛选数组中满足条件的元素，返回一个筛选后的新数组
  • 重点总结：
  • 总结

前言

在文章开头，先问大家一个问题：

在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()用法的文章就介绍到这了,更多相关JS forEach()、map()、every()、some()和filter()内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结

    1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let list = [1, 2, 3, 4, 5]; let other = list.map((d, i) => { return d * 2; }); console.log(other); // print: [2, 4, 6, 8, 10] 2.filter 有返回值,返回一个符合func条件的元素数组 let list = [1, 2, 3, 4, 5]; let other = list.filter((d,

  • JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结

    JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结

    1.数据类型:JavaScript定义的数据类型有字符串.数字.布尔.数组.对象.Null.Undefined,但typeof有区分可判别的数据分类是number.string.boolean.object(null / array).function和undefined.undefined 这个值表示变量不含有值,null 可以用来清空变量 let a = 100; typeof a;//number a = undefined; typeof a;//undefined a = null;

  • JavaScript forEach()遍历函数使用及介绍

    forEach()函数从头到尾把数组遍历一遍.有三个参数分别是:数组元素,元素的索引,数组本身(如果是一个参数就是数组元素,也就是数组的值. var data=[1,2,3,4,5,6]; var sum=0; data.forEach(function(v){//其中的v就是数组的值 123456 sum+=v;}) document.write(sum+"<br>");//打印出来是21 data.forEach(function(o,p,q){//分别对应:数组元素,

  • 原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

    本文实例讲述了原生JS forEach()和map()遍历的区别.兼容写法及jQuery $.each.$.map遍历操作.分享给大家供大家参考,具体如下: 一.原生JS forEach()和map()遍历 共同点: ①.都是循环遍历数组中的每一项. ②.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. ③.匿名函数中的this都是指Window. ④.只能遍历数组. 1.forEach() 没有返回值

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

    目录 前言 一.forEach(),用于遍历数组,无返回值 二.map(),用于遍历数组,返回处理之后的新数组 三.every(),用于判断数组中的每一项元素是否都满足条件,返回一个布尔值 四.some(),用于判断数组中的是否存在满足条件的元素,返回一个布尔值 五.filter(),用于筛选数组中满足条件的元素,返回一个筛选后的新数组 重点总结: 总结 前言 在文章开头,先问大家一个问题: 在Javascript中,如何处理数组中的每一项数据? 有人可能会说,这还不简单,直接一个for循环遍历

  • Js中forEach修改原数组与sort排序经典场景详解

    目录 forEach() 介绍 forEach() 能不能改变原数组? sort() 介绍 如果在使用 sort() 方法时不带参, sort()方法:带参时,自定义排序规则 sort 方法举例:将数组按里面某个字段从小到大排序 总结 forEach() 介绍 forEach()方法需要一个回调函数(这种函数,是由我们创建但是不由我们调用的)作为参数 回调函数中传递三个参数: 第一个参数,就是当前正在遍历的元素 第二个参数,就是当前正在遍历的元素的索引 第三个参数,就是正在遍历的数组 代码举例:

  • js中遍历Map对象的简单实例

    实例如下: console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件名称 以上这篇j

  • js中遍历Map对象的方法

    js中遍历Map对象的方法 console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件

  • jQuery中each和js中forEach的区别分析

    本文实例讲述了jQuery中each和js中forEach的区别.分享给大家供大家参考,具体如下: <script> $(function(){ // 3.1遍历数组 var arr = [1, 3, 5, 7, 9]; // 3.1.1通过原生方法遍历数组 // 第一个回调函数参数是遍历到的元素 // 第二个回调函数参数是当前遍历的索引 // 返回值:没有返回值 var res = arr.forEach(function(ele, idx){ console.log(idx, ele);

  • js中forEach，for in，for of循环的用法示例小结

    本文实例讲述了js中forEach,for in,for of循环的用法.分享给大家供大家参考,具体如下: 一.一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i++) { console.log(i,array[i]); } 二.用for in的方遍历数组,得到的是索引 var array = [1,2,3,4,5,6,7]; for(let index in array) { console

  • js中forEach的用法之forEach与for之间的区别

    目录 一.定义和用法 二.运用场景 1.运用的场景(计算数字之和) 2.运用的场景(给原始数组新增key值) 三.forEach 跳出循环 1.forEach 跳出当前的循环 return 2.forEach结合try跳出整个循环 3.forEach 与for循环的区别 [面试题] 一.定义和用法 forEach() 调用数组的每个元素,并将元素传递给回调函数. 注意: forEach() 对于空数组是不会执行回调函数的. 用法: array.forEach(function(currentVa

  • JS中showModalDialog关闭子窗口刷新主窗口用法详解

    本文实例讲述了JS中showModalDialog关闭子窗口刷新主窗口用法.分享给大家供大家参考,具体如下: 网上找了好长时间 大都是window.opener.location.reload(),等等 都不是我想要的 最后终于发现了一个 想知道的就往下看看吧 showModalDialog和showModelessDialog 一.showModalDialog和showModelessDialog有什么不同? showModalDialog:被打开后就会始终保持输入焦点.除非对话框被关闭,否

  • Python3中map()、reduce()、filter()的用法详解

    目录 1.map() 2.filter() 3.reduce() Python3中的map().reduce().filter() 这3个一般是用于对序列进行操作的内置函数,它们经常需要与 匿名函数 lambda 联合起来使用,我们今天就来学习下. 1.map() map() 可以用于在函数中对指定序列做映射,返回值是一个迭代器,其使用语法如下: map(function, *iterables) 上面的第一个参数 function 指一个函数,第二个参数 iterable 指一个或多个可迭代对

随机推荐