【JS】高级函数相同点和差异性[map|foreach|for|find|findIndex|filter|reduce](包括但不限于)

map

用于改变数组中元素的值数据处理
返回新数组,不改变原数组

let arr = [1,2,3,5,4,6]
let result = arr.map((item,index,arr)=>{
	return item * 2
})
console.log(result)  // 结果: [2, 4, 6, 10, 8, 12]

foreach

forEach 是 ES5 中操作数组的一种方法，主要功能是遍历数组，就是 for 循环的加强版，该语句需要一个回调函数，作为参数。回调函数的形参，依次为，value：遍历的数组内容；index：对应的数组索引，array：数组本身。

// 分别对应：数组元素，元素的索引，数组本身
var arr = ['a','b','c'];	
arr.forEach(function(value,index,array){
	console.log(value);
	console.log(index);
	console.log(array);
})

for 和 foreach 区别

for 是把运算在自身中完成,可以使用break和continue控制循环体的运作
foreach 是遍历每个元素后提供的回调方法,不可以使用break和continue控制循环体,因为回调在遍历元素之后

map 和 foreach 区别

forEach()会修改原来的数组,不能return结果。
map()方法不会修改原数组并得到计算后的新数组,需要return结果。

find

find是找到数组中符合条件的第一项
返回的是具体的内容(数组中的某一项)不限数据类型
不会改变原数组

let arr = [1,2,3,5,4,6]
let result = arr.find((item)=>item==3) // 结果  =>  3

filter

filter的功能过滤，在遍历数组后拿到所有符合条件的item项
返回的是数组,每项是符合条件的item
不会改变原数组

let arr = [1,2,3,5,4,6]
let result =  arr.filter(item => item > 4)  // 结果  => [5, 6]

find和 filter 区别

相同点 => 都不改变原数组,返回新数组

find() 返回第一个元素。
filter() 返回一个包含所有通过条件元素的新数组

findIndex

查找目标数组元素，找到就返回元素的位置下标

let arr = [1,2,3,5,4,6]
let result = arr.findIndex((item)=>item==3) // 结果  =>  2

find 和 findIndex 区别

相同点 都是查找符合条件的数组item

find查找成功后返回具体的item项
findIndex 查找成功后返回具体item的下标
find 找不到返回undefind findIndex找不到时返回-1

reduce

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
当需要计算数组中的每一项的某个属性时,用到reduce函数
不会修改原数组,返回一个新数据[基本数据类型|数组|对象]

入参

prev：函数传进来的初始值或上一次回调的返回值
current：数组中当前处理的元素值
Index：当前元素索引
arr：当前元素所属的数组本身
initialValue：传给函数的初始值 类型:[基本数据类型,数组,对象]

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = arr.reduce((prev, current, index, arr)=> {
  return prev+current
}, 0)
console.log(sum) //55