共计 2525 个字符，预计需要花费 7 分钟才能阅读完成。
需要：有这样一个数组[10, 20, 110, 200, 60, 30, 40]
1. 筛选出数组中小于 100 的元素
2. 将筛选出的每个元素的值 x2
3. 实现第 2 步之后，将数组中的所有元素加起来
一般办法
如果咱们还没接触过 filter、map、reduce，那么就是用 for 循环
HTML
<script>
list = [10, 20, 30, 40, 60, 110, 200]
newList = []
newList2 = []
total = 0
// 第 1 次 for 循环把小于 100 的数退出新的数组 newList
for (item of list){
if (item<100){newList.push(item)
}}
// 第 2 次 for 循环把所有的元素值乘以 2
for (item of newList){
newValue = item * 2
newList2.push(newValue)}
// 第 3 次 for 循环把数组中的全副元素加起来
for (item of newList2){
total += item}
console.log(total)
</script>
以上写起来十分繁琐，还要定义很多变量，代码浏览起来也不是很好，其实咱们有更好的形式，上面介绍
filter
检测数值元素，并返回符合条件所有元素的数组。
定义和用法
filter() 办法创立一个新的数组，新数组中的元素是通过查看指定数组中符合条件的所有元素
留神
filter() 不会对空数组进行检测。
filter() 不会扭转原始数组。
语法
Bash
array.filter(function(currentValue,index,arr), thisValue)
参数阐明如下：
function(currentValue, index, arr)：必填函数，数组中的每个元素都会执行这个函数
currentValue：必填，以后元素的值
index：可选。以后元素的索引值
arr：可选。以后元素属于的数组对象
thisValue：可选。对象作为该执行回调时应用，传递给函数，用作 this 的值。如果省略了 thisValue，this 的值为 undefined
小练习
应用 filter 函数筛选出 [10, 20, 110, 200, 60, 30, 40] 小于 100 的
Bash
list = [10, 20, 30, 40, 60, 110, 200]
newList = list.filter(function (n) {
return n < 100
})
console.log(newList)
打印后果
CSS
[10, 20, 30, 40, 60]
map
通过指定函数解决数组的每个元素，并返回解决后的数组。
定义和用法
map() 办法返回一个新数组，数组中的元素为原始数组元素调用函数解决后的值。
map() 办法依照原始数组元素程序顺次解决元素。
留神
留神：map() 不会对空数组进行检测。
留神：map() 不会扭转原始数组。
语法
Bash
array.map(function(currentValue,index,arr), thisValue)
参数阐明如下：
function(currentValue, index, arr)：必填函数，数组中的每个元素都会执行这个函数
currentValue：必填，以后元素的值
index：可选。以后元素的索引值
arr：可选。以后元素属于的数组对象
thisValue：可选。对象作为该执行回调时应用，传递给函数，用作 this 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
小练习
将数组 [10, 20, 30, 40, 60] 中的每个元素值乘以 2
HTML
<script>
list = [10, 20, 30, 40, 60]
newList = list.map(function (n) {
return n * 2})
console.log(newList)
</script>
打印后果
CSS
[20, 40, 60, 80, 120]
reduce
将数组元素计算为一个值（从左到右）
定义和用法
reduce() 办法接管一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 能够作为一个高阶函数，用于函数的 compose。
留神:reduce() 对于空数组是不会执行回调函数的。
语法
Bash
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数阐明如下：
function(total,currentValue, index,arr)：必填函数，数组中的每个元素都会执行这个函数
total：必填。初始值, 或者计算完结后的返回值。
currentValue：必填，以后元素的值
index：可选。以后元素的索引值
arr：可选。以后元素属于的数组对象
initialValue：可选。传递给函数的初始值
小练习
计算数组之和[20, 40, 60, 80, 120]
HTML
<script>
list = [20, 40, 60, 80, 120]
newList = list.reduce(function (total, n) {
return total + n}, 0)
console.log(newList)
</script>
打印后果
320
应用 filter 和 map 和 reduce 实现案例
下面咱们别离介绍了 3 个高阶函数，接下来联合起来应用
形式 1
HTML
<script>
list = [10, 20, 110, 200, 60, 30, 40]
newList = list.filter(function (n) {
return n < 100}).map(function (n) {
return n * 2}).reduce(function (total, n) {
return total + n})
console.log(newList)
</script>
形式 2
HTML
<script>
list = [10, 20, 110, 200, 60, 30, 40]
newList = list.filter(n => n < 100).map(n => n * 2).reduce((total, n) => total+n);
console.log(newList)
</script>
当前咱们就能够一行代码实现下面的需要，而不须要应用 for 循环了
