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

时间: 2018-03-05阅读: 2293标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

js判断对象、数组是否为空

做项目时想要根据判断对象是否为空,然后执行不同的操作,下面就整理下如何实现,针对数组和对象的通用方法。方法一:isPrototypeOf()和length判断、方法二:hasOwnProperty、方法三:利用JSON.stringify()方法

使用 Array.fill( ) 填充对象的问题

当你想使用 Array.fill( ) 来填充一个全是空白对象的数组时需要特别注意。Array(length).fill({ }) 这样填充创建的数组,里面每一项{ }都完全相同

js 数组方法,包含ES6方法

JavaScript常用数组操作方法:concat() 方法用于连接两个或多个数组。join() 方法用于把数组中的所有元素放入一个字符串。push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。pop() 方法用于删除并返回数组的最后一个元素。

Array.from() 五个超好用的用途

任何一种编程语言都具有超出基本用法的功能,它得益于成功的设计和试图去解决广泛问题。JavaScript 中有一个这样的函数: Array.from:允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串

原生js获取数组中的最大值max和最小值min的方法总结

JavaScript获取数组中的最大值和最小值:方法一:传统循环遍历,方法二:利用Math.max和Math.min,方式三.利用sort排序...

Array.prototype.slice.call()

MDN中对于Array.prototype.slice.()的介绍中,提到了类数组对象。以下是原文:slice 方法可以用来将一个类数组(Array-like)对象/集合转换成一个新数组。你只需将该方法绑定到这个对象上。 一个函数中的 arguments 就是一个类数组对象的例子。

JS实现遍历不规则多维数组的方法

这篇文章主要介绍了JS实现遍历不规则多维数组的方法,涉及javascript数组递归遍历相关实现与使用技巧,需要的朋友可以参考下

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

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

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

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

如何在 JavaScript 中更好地使用数组

在过去的数个月里,我注意到在我审阅的 pull request 中有四个(关于数组使用的)错误经常出现。同时,我自己也会犯这些错误,因此有了这篇文章。让我们一起学习,以确保以后能正确地使用数组方法!

点击更多...

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