js数组方法forEach、map、filter、reduce、every、some总结

CocoaChina 发布于2019-08-26 12:11 / 3167人阅读

摘要：不会改变原数组，它返回过滤后的新数组。打印到控制台成功的收集到里面错误的收集到里面。语法参数回调当前的当前的索引值这个数组对象回调的指向用法场景这个一般就用在，判断数组的每个元素是否符合条件。

首先是函数概述：
map():返回一个新的Array，每个元素为调用func的结果
filter():返回一个符合func条件的元素数组
some():返回一个boolean，判断是否有元素是否符合func条件
every():返回一个boolean，判断每个元素是否符合func条件
forEach():没有返回值，只是针对每个元素调用func
reduce():有返回值，重点是计算数组，返回一个值
其次
1、map速度比forEach快
2、map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，
3、map因为返回数组所以可以链式操作，forEach不能

filter
语法

var new_arr = arr.filter(callback(element, index, array){
}, this)

参数：callback 回调

 element 当前的value
 index   当前的索引值
 array   arr这个数组对象
 this 回调的this指向

用法
//如果返回值是true的话，就是符合条件。
//filter 不会改变原数组，它返回过滤后的新数组。
//这个里返回数组里面的偶数
[10,11,12,13].filter((v)=>v % 2 == 0)
场景
场景就是过滤，把符合条件的整理到一起，常见的就是展示审核通过的数据

forEach
语法

arr.forEach(callback(element, index, array){
}, this)

参数：callback 回调

 element 当前的value
 index   当前的索引值
 array   arr这个数组对象
 this 回调的this指向

用法
//遍历数组。打印到控制台

[10,11,12,13].forEach((v)=>{
    console.log(v)
})

// 成功的收集到success里面,错误的收集到error里面。

var success = [],error = [];
[{state:1},{state:0},{state:0},{state:0}].forEach((v)=>{
    if(v.state == 1){
        success.push(v)
    }else{
        error.push(v)
    }
})

场景
比如说绑定事件，比如判断值然后push到不同的地方

map
语法

arr.map(callback(element, index, array){ }, this)

参数：callback 回调

 element 当前的value
 index   当前的索引值
 array   arr这个数组对象
 this 回调的this指向

用法
//把数值格式化，保留两位小数
[10.055,11.054,12.056,13.789].map((v)=>+v.toFixed(2))
场景
这个一般就用在，我需要一组值，但是这个值不对，需要计算原数组来生成。

reduce
语法

arr.reduce(callback(accumulator, element, index, array){
}, initialValue)

参数：callback 回调
sum 累加器的返回值，也就是上一次回调的返回值 element 当前的value index 当前的索引值 array arr这个数组对象 initialValue 初始传入的值，如果不传回调从下标1开始，下标0作为初始值
用法
//累加

[10,11,12,13].reduce((s,v)=>s+v,0)

场景
这个计算整个数组得出一个值的

some
语法

arr.some(callback(element, index, array){
}, this)

参数：callback 回调

 element 当前的value
 index   当前的索引值
 array   arr这个数组对象
 this 回调的this指向

用法

initArray = initArray.some(item => { if (item === 1){ return true } return false })

场景
这个一般就用在，判断数组里是否有某个值。

every
语法

arr.every(callback(element, index, array){
}, this)

参数：callback 回调

 element 当前的value
 index   当前的索引值
 array   arr这个数组对象
 this 回调的this指向

用法

initArray = initArray.every(item => { if (item === 1){ return true } return false })

场景
这个一般就用在，判断数组的每个元素是否符合func条件。

云服务器 GPU云服务器数组方法reduce js数组遍历foreach map-reduce js 传递map数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108205.html

js之灵活使用可遍历数组的API

摘要：总结遍历数组的时候应该尽量使用这些，灵活运用可以让代码更加优雅，这种尽可能使用函数和链式调用的风格很接近函数式编程，可以提高代码质量。 js中有很多可以遍历数组的API，既然已经封装的这么好，为什么不在平常开发的时候使用，本文讲讲forEach、map、filter、some、every、reduce这些API的使用，并且和普通的for语句作对比。我们以一个对象数组作为测试数据： c...

sutaking 2019-08-22 14:05 评论0 收藏0
生动形象解释forEach、filter、map、some、every、find、findIndex

摘要：前言从最开始学的循环遍历方法，到后来层出不穷的各种遍历方法，其实最大的区别就是应用场景的不同。我们最需要记住的就是，什么情况下用哪一种方法比较合适。前言从最开始学的for循环遍历方法，到后来层出不穷的各种遍历方法，其实最大的区别就是应用场景的不同。我们最需要记住的就是，什么情况下用哪一种方法比较合适。从挑土豆开始 showImg(https://segmentfault.com/...

Luosunce 2019-08-23 16:51 评论0 收藏0
关于JS循环遍历

摘要：关于循环遍历写下这篇文章的目的，主要是想总结一下关于对于集合对象遍历的方式方法，以及在实际应用场景中怎样去使用它们。的作用主要是去遍历对象的可枚举属性。例如索引，数值打印结果为当第二项不满足条件式跳出循环，返回。关于JS循环遍历写下这篇文章的目的，主要是想总结一下关于JS对于集合对象遍历的方式方法，以及在实际应用场景中怎样去使用它们。本文会主要介绍：while,for,forEac...

eternalshallow 2019-08-21 11:38 评论0 收藏0
ES5新增数组操作forEach()、map()、filter()、some()、every()

摘要：方法，还有一个特性，当缺省或是为，和方法一样，通常我用对数组的每个元素进行一定操作映射后，会返回一个新的数组该方法对数组中的每一项运行给定函数。 1. 前言 ES5中新增的一些处理数组（Array）的方法，对于用JavaScript处理数据非常有用。我总结了一下，给这些方法分了类，大体如下： 2个索引方法：indexOf() 和 lastIndexOf()； 5个迭代方法：forEa...

13651657101 2019-08-20 15:53 评论0 收藏0