JS高阶函数笔记filter()方法将会重新创建一个新数组, 在不改变原始数组的情况下，将通过函数筛选的元素作为新数组的

Array.prototype.filter

filter()方法将会重新创建一个新数组, 在不改变原始数组的情况下，将通过函数筛选的元素作为新数组的元素。递给 filter 的回调函数（callback）接受三个参数，分别是 element、index（可选）、array（可选），除了 callback 之外还可以接受 this 值（可选），用于执行 callback 函数时使用的this 值。其返回值是一个新数组、由通过测试的所有元素组成，如果没有任何数组元素通过测试，则返回空数组。

语法：

let newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

满足需求：取出一个数组内所有小于100的数

常规方法：

let array = [42, 56, 89, 111, 946, 232, 12, 466, 30];
//取出一个数组100以内的数
let newArray = [];
for (let i of array) {
  if (i < 100) {
    newArray.push(i);
  }
}
console.log(newArray);

使用高阶函数：

let array = [42, 56, 89, 111, 946, 232, 12, 466, 30];

//filter函数求解
let newArray = array.filter(function (n) {
  return n < 100;
})
console.log(newArray);

Array.prototype.map

map()方法将创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果，原始数组不会改变。传递给 map 的回调函数（callback）接受三个参数，分别是 currentValue、index（可选）、array（可选），除了 callback 之外还可以接受 this 值（可选），用于执行 callback 函数时使用的this 值。

语法：

let new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

满足需求：将数组内的数都乘以3

常规方法：

//将这些数乘以3
let newArray = [42, 56, 89, 111, 946, 232, 12, 466, 30];
let newArray2 = [];
for (let i of newArray) {
  newArray2.push(i*3);
}
console.log(newArray2);

使用高阶函数：

//map函数求解
let newArray = [42, 56, 89, 111, 946, 232, 12, 466, 30];
let newArray2 = newArray.map(function (n) {
  return n * 3;
})
console.log(newArray2);

Array.prototype.reduce

reduce()方法对数组中的每个元素执行一个提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。传递给 reduce 的回调函数（callback）接受四个参数，分别是 accumulator（累加器）、currentValue（当前值）、Index（可选）、array（可选），除了 callback 之外还可以接受 initialValue 值（初始值）（可选）。

语法：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

满足需求：将一个数组内的数相加

常规方法：

//将这些数相加
let newArray2 = [42, 56, 89, 111, 946, 232, 12, 466, 30];
let sum = 0;
for (let i of newArray2) {
  sum += i;
}
console.log(sum);

使用高阶函数：

//reduce函数求解,0为初始值
let newArray2 = [42, 56, 89, 111, 946, 232, 12, 466, 30];
let sum = newArray2.reduce(function (prev, n) {
  return prev + n;
}, 0)
console.log(sum);

案例结合

我们将上面的案例结合起来做比较，需完成以下需求：

取出一个数组内小于100数
将这些数乘以3
再将这些数相加

常规解法：

//常规解法
let array = [42, 56, 89, 111, 946, 232, 12, 466, 30];
//取出一个数组100以内的数
let newArray = [];
for (let i of array) {
  if (i < 100) {
    newArray.push(i);
  }
}
console.log(newArray);

//将这些数乘以3
let newArray2 = [];
for (let i of newArray) {
  newArray2.push(i*3);
}
console.log(newArray2);

//将这些数相加
let sum = 0;
for (let i of newArray2) {
  sum += i;
}
console.log(sum);

使用高阶函数

//使用高阶函数求解
let array = [42, 56, 89, 111, 946, 232, 12, 466, 30];

//filter函数求解
let newArray = array.filter(function (n) {
  return n < 100;
})
console.log(newArray);

//map函数求解
let newArray2 = newArray.map(function (n) {
  return n * 3;
})
console.log(newArray2);

//reduce函数求解,0为初始值
let sum = newArray2.reduce(function (prev, n) {
  return prev + n;
}, 0)
console.log(sum);

简便写法

高阶函数也可以写为以下形式

对其进行连续操作

//连续操作，函数式编程
let sum2 = array.filter(function (n) {
  return n < 100;
}).map(function (n) {
  return n * 3;
}).reduce(function (prev, n) {
  return prev + n;
}, 0)
console.log(sum2);

合理运用ES6箭头函数

//使用箭头函数
let sum3 = array.filter(n => n < 100).map(n => n * 3).reduce((prev, n) => prev + n);
console.log(sum3);

两者比较我们不难看出高阶函数更具有逻辑性，比之常规方法去除了for循环，更加地简洁。