Array的 every、some、filter、map的区别,以及和reduce的区别

时间: 2018-03-05阅读: 2068标签: Array

这几个方法有时候总是傻傻分不清,尤其map,总是一下子有点懵逼记不清和其他方法的区别,每次都需要查一下API,他们的相同点都是需要遍历数组中的每一项,重点是他们的区别,不要搞混了,搞清楚他们的返回结果有什么区别。


every、some

这两个比较好理解,测试数组的元素是否都通过了指定函数的测试,测试一个数组是否符合某个条件, every 表示每一项都必须通过才会返回 true , some 表示只要数组元素某一项满足即可,比如下面的例子,分别用 every 和 some 调用。

var arr = [1, 12, 32, 2, 3, 44, 120, 3, 5];
var res1 = arr.every(function(item, index){
    return item > 20;
});
console.log(res1); // false

var res2 = arr.some(function(item, index){
    return item > 20;
});
console.log(res2); // true


filter

调用 filter 的结果是创建一个新数组,数组的元素是通过所提供函数通过测试的所有元素

var res3 = arr.filter(function(item, index, array){
  return item > 20;
});
console.log(res3); // 32,44,120

如果处理表达式是运算,将无效,返回元素组成员组成的数组

var res33 = arr.filter(function(item, index, array){
  return item * 2;
});
console.log('res33', res33); // 1, 12, 32, 2, 3, 44, 120, 3, 5

这个一点可以和 map 比较一下


map

调用 map 的结果也是创建一个新数组,不同的是:

  • 如果给定的处理函数的表达式是逻辑判断,它返回的是布尔值组成的数组

    var res4 = arr.map(function(item, index, array){
      return item > 20;
    });
    console.log(res4); // false,false,true,false,false,true,true,false,false
    
  • 如果给定处理函数的表达式是运算表达式,它返回的是每一项运算后的结果的数组

    var res5 = arr.map(function(item, index, array){
      return item * 2;
    });
    console.log(res5); // 2,24,64,4,6,88,240,6,10
    


reduce

reduce 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。回调函数有两个必须的参数:

  • accumulator,累加器累加回调的返回值; 它是上一次调用回调时返回的累积值
  • currentValue,数组中正在处理的元素。
    var res6 = arr.reduce(function(accumulator, item){
      return accumulator + item;
    });
    console.log(res6); // 222
    

reduce 的最重要点就是利用累加器参数(accumulator)了,如果值操作第二个参数 item, 将会只处理数组最后一项,跟 for 循环中的 i 的效果一样

var arr = [1, 12, 32, 2, 3, 44, 120, 3, 5];
var res66 = arr.reduce(function(accumulator, item){
  return item * 2;
});
console.log('res66', res66); // 10

上面的代码试图只操作 item ,结果只是返回了数组最后一项的处理结果: 5 * 2 = 10

以上个人总结,有不对的地方请指正。


原文  https://blog.dunizb.com/2018/03/04/Array-methods-every-some-filter-map-reduce/ 


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/461

JS取出两个数组中的不同或相同元素

concat() 方法:用于连接两个或多个数组。Array filter() 方法:创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。indexOf() 方法:可返回某个指定的字符串值在字符串中首次出现的位置。

JS中forEach的用法

orEach是ES5中操作数组的一种方法,主要功能是遍历数组,forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身

js中数组创建的多种方式,数组中常用方法总汇

javascript创建数组的几种方式:1、字面量形式直接创建数组,2、Array构造函数创建数组。js数组常用的方法有哪些:join(),push()和pop(),shift() 和 unshift(),sort(),reverse(),concat()等

在 Array.filter 中正确使用 Async

在第一篇文章中,我们介绍了 async / await 如何帮助处理异步事件,但在异步处理集合时却无济于事。在本文中,我们将研究该filter函数,它可能是支持异步函数的最直观的方法。

js中reduce的用法,如何使用reduce函数

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组

js中split()和join() 的使用_数组对象和字符串的相互转换

在前端开发中,相信大家都遇到过数组和字符串相互转换的情况 ,JavaScript提供了split()和join()这2个函数来进行转换,下面就介绍数组对象和字符串的相互转换。

从非数组对象转数组方法小结

从非数组对象转数组方法:Array.prototype.slice.call(obj、Array.from(obj)、[…obj]、Object.values(obj)等

arguments转化成Array数组的方法

简单说一下arguments,arguments 就是函数内一个內建对象,它包含函数接收到的所有变量;所以,在实际开发中,我们使用arguments可以很方便的获取到所有的实参,并且也需要对其使用是写数组的方法

es6中 Array.from()函数的用法

ES6为Array增加了from函数用来将其他对象转换成数组,Array.from可以接受三个参数,我们看定义:Array.from(arrayLike [, mapFn [, thisArg]])。arrayLike:被转换的的对象。 mapFn:map函数。 thisArg:map函数中this指向的对象。

js判断数组是否包含某个元素

js判断JS 判断某变量是否为某数组中的一个值的4种方法(总结),分享给大家。indexOf()、正则表达式、arr.find() 、for循环结合if判断

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!