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

更新日期: 2018-03-05阅读量: 2335标签: 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对普通数组去重算法的7种方法总结

JavaScript实现普通数组去重,讲解各种算法的思想和改进方法,已经他们的优缺点...利用数组的reduce方法,使用了filter方法,利用ES6去重,相对来说更为简单

如何快速的创建一个包含100个元素的数组

如何快速的创建一个包含100个元素的数组, 最初见到的问题是如何创建100个为元素为0 的数组,研究了一系列的方法,包含Es6 新的API ,不得不说, ES6 好强大!

在JavaScript中为什么应该用map和filter替换forEach?

当你需要拷贝一个数组的全部或者部分到一个新数组的时候,优先使用map和filter而不是forEach。使用map和filter有很多好处,比如关注点分离、易于测试、可读性和异步编程的支持,因此这是一个明智的选择。

JS中forEach的用法

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

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

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

js实现交换数组元素位置的方法总汇

交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式:第三方变量、splice方法、解构赋值

es6之Array.from()方法

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。==只要是部署了Iterator接口==的数据结构,Array.from都能将其转为数组。

js中的Array

Array 对象用于在单个的变量中存储多个值。 创建 Array 对象的语法;参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时

Array.prototype.slice.call()

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

Array数组相关方法

push向数组末尾添加元素;unshift向数组开头增加元素;pop删除数组末尾一项;shift删除数组的第一项;join为数组添加指定的分隔符;slice找某一区域内的项,返回成新数组形式

点击更多...

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