JavaScript中filiter/map/reduce高阶函数简单使用案例

本文为本人近期学习Vue心得及笔记分享，如有错误，多多包涵。
源于视频https://www.bilibili.com/video/BV15741177Eh?p=44

// 高阶函数补充
const nums = [10, 20, 123, 1264, 74, 712, 6, 437];

// filter/map/reduce
// 高阶函数

// 1.filter 过滤(筛选)
// filter中的回调函数有一个要求 必须返回一个boolean值 true/false
// true:函数内部自动将这次回调的num加入到新的数组中
// false:函数内部过滤掉这次的num
// 比如你对于这次的条件是 数值小于100的符合条件就直接return num<100就行 因为如果符合就会返回true然后加入到数组
// 不符合就不加入
let newFilterNums = nums.filter(function (num) {
  return num < 100;
});
console.log(
  "过滤<100的数字并根据bool返回值true后自动加入到新的数组中",
  newFilterNums
);
// 2.map 映射
// 返回这一次的数值运算后的值加入到新的数组中
// 原本的假设原本的n是1 那么return n*2的话 会以2的形式加入到新的数组中
let new2FilterNums = newFilterNums.map(function (n) {
  return n * 2;
});
console.log("上次过滤后的全部*2后加到数组中", new2FilterNums);
// 3.reduce
// reduce有多个函数（貌似是2个）
// 也就是重载，函数不会被覆盖，因为他是用typescript写的
// 可以传入两个参数
// reduce(参数一);
// reduce(参数一，参数二);
// 参数一本身就是个回调函数，参数二是初始值指向previous
// 也就是reduce(function(previous,value), 参数二);
// 当然回调函数里的参数是可选的不用全写
// previous, value, index, arr;
// previous上一次的值,value这一次的遍历的值,index这一次遍历的数组下标,arr指向调用这个reduce方法的数组
// 参数二的值决定了第一次遍历的初始值, 假设是0的话就是
// reduce(function (previous, value, index, arr) {}, 0);
// reduce总共遍历数组长度的次数，比如n = [1,2,3,4]; 那就遍历4次，此时的value就是遍历这一次的数组值
// 每一次遍历的previous也就是上一次执行这个函数体return的结果
// 可以用来做加法求和等
// 例如:
console.log("reduce方法开始");
let reduce_total = new2FilterNums.reduce(function (
  previous,
  value,
  index,
  arr
) {
  console.log(
    "上次的值:" + previous + "取决于return",
    "本次遍历的值:" + value,
    "本次遍历下标" + index + "(第" + index + "次遍历)",
    "用本方法遍历整个的数组是" + arr
  );
  return previous + value;
  // 返回上一次的值加这一次的值 实现遍历完成后求和的效果
  // 也就是假设数组是[1,2,3,4] 总共需要遍历4次
  // 上一次的previous是0,这一次的value是1 previous+value >>>> 0 + 1 = 1 随后previous的值变成了1
  // 上一次的previous是1,这一次的value是2 previous+value >>>> 1 + 2 = 3 随后previous的值变成了3
  // 上一次的previous是3,这一次的value是3 previous+value >>>> 3 + 3 = 6 随后previous的值变成了6
  // 上一次的previous是6,这一次的value是4 previous+value >>>> 6 + 4 = 10 随后previous的值变成了10
});
console.log("reduce方法开始结束", reduce_total);
console.log("----------------------");

// 优化上面的3个需求直接链式写法满足
let better_total = nums
  .filter(function (num) {
    return num < 100;
  })
  .map(function (num) {
    return num * 2;
  })
  .reduce(function (previous, value) {
    return previous + value;
  }, 0);
console.log("更好的写法---链式写法" + better_total);
console.log("----------------------");
let best_total = nums
  .filter((num) => num < 100)
  .map((num) => num * 2)
  .reduce((previous, value) => previous + value);
console.log("优化更好的写法---链式箭头函数写法" + best_total);
// 箭头函数写法可以看
// https://github.com/zhangtianyi0110/VueLearnNotes/blob/master/01-ES6补充/01-ES6补充.md
// 反正简单的写法就是说
// 假设传入一个值(假设变量为value)，就直接  value =>
// 这个东西就相当于匿名函数function(value){}
// 然后假设整个过程体就一句话 比如说
// function (value) {
//   return 1;
// }
// 那么直接写value => 1 就是一样的效果
// 假设传入多个值，那么就是(值1,值2,值3,值n) => 返回值
// 如果过程体不是一句话的话 就 (参数) => {
//   过程体
// }