上手filter map reduce方法

大家好没， 我是热狗得小舔狗！

ES6高级数组函数：filter map reduce方法都是对数组进行操作。及其方便，也很好理解。下面是我整理的资料，希望对你有所帮助！！

filter()方法简介及解析

1. filter(过滤)：顾名思义它就是返回你需要的元素

官方介绍：
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

该方法有两点需要注意的地方：1. 不会改变原来的数组 2.空数组不会进行检测

如果只想要数组中我们需要的数据，就可以使用filter方法。类似mysql中where子句。
康下代码：

var arr = [1, 2, 3, 4, 5]
var new_arr = arr.filter( function(data) {		// data为 依次 取出arr的值
		return data < 3;							// 返回True：保留(新数组)    False：舍弃														
	})

console.log(arr);			// [1, 2, 3, 4, 5]
console.log(new_arr);		// [1, 2]

像是for循环操作的简写，符合条件的才使用！过滤嘛~~不会改变原数组。

map()方法简介及解析

2. map(映射)：映射指两个元素的集之间元素相互“对应”的关系。

官方介绍：
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。

该方法也有两点需要注意的地方：1. 不会改变原来的数组 2.空数组不会进行检测

如果我们想对数组里的每个值，都想进行相同操作，就可以使用map：
比如，把原数组的值都扩大两倍
康下代码：

var arr = [1, 2, 3, 4 ,5]
var new_arr = arr.map( function(data) {		// data为  依次  去取出arr的值
		return data*2						// 返回 值的两杯
	})

console.log(arr);			// [1, 2, 3, 4, 5]
console.log(new_arr);		// [2, 4, 6, 8, 10] 

也像是个for循环简化操作, 不会改变原数组。

reduce()方法简介及解析

reduce()： 用来迭代一个数组，并且把它累积到一个值中。(结果作为参数，看栗子，好理解)

官方介绍：
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。
这个就是计算累加，需要注意的是，这个里面需要穿两个参数。然后返回的不是一个数组了，是一个确定的值。

官方都说，该方法称为累加器了。那么就直接整栗子啦。

var numbers = [1, 2, 3, 4];
 
function getSum(total, num) {	//num依次为numbers中的每个值	total为'total+num'结果值 一开始为0
    return total + num;
}

var nubmer = numbers.reduce(getSum);
console.log(nubmer);	// 10

reduce()方法扩展：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr. 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值

总结

这三个高阶方法，都可以使用for循环做出来。为什么要使用？

1. 减少代码量，可阅读性更强，有利于性能优化。
2. 无需知道对象长度
3. 逼格高(我喜欢！！！)