JavaScript 高级函数使用 （掌握）

我们先了解一下编程范式：

• 编程范式: 命令式编程/声明式编程
• 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)

通过一个计算来理解这3个函数，计算要求是先找出数组中小于100的数，然后把这些数乘以2再相加，最后输出总数

一、普通写法

        写在 computed 里

// 1.需求: 取出所有小于100的数字
let newNums = []
for (let n of nums) {
  if (n < 100) {
    newNums.push(n)
  }
}

// 2.需求:将所有小于100的数字进行转化: 全部*2
let new2Nums = []
for (let n of newNums) {
  new2Nums.push(n * 2)
}

console.log(new2Nums);


// 3.需求:将所有new2Nums数字相加,得到最终的记过
let total = 0
for (let n of new2Nums) {
  total += n
}

console.log(total);

二、高阶函数写法

主要介绍三个高阶函数，分别是 filter、map、reduce
1、filter中的回调函数有一个要求: 必须返回一个boolean值

• true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中
• false: 当返回false时, 函数内部会过滤掉这次的n

//1. filter 函数的使用
const nums = [10,20,111,222,444,40,50]
let newNums = nums.filter(function(n){
	return n < 100//true,n(10)放到新数组中
})
console.log(newNums);

//2. map 函数的使用
let new2Nums = newNums.map(function(n){
	return n*2
})
console.log(new2Nums);

// 3. reduce函数的使用
// reduce 作用对数组中所有的内容进行汇总
let total = new2Nums.reduce(function(preValue,n){
	return preValue + n
},0)
console.log(total);
// 第一次: preValue 0 n 20
// 第二次: preValue 0+20 n 40
// 第二次: preValue 20+40 n 80
// 第二次: preValue 60+100 n 100
// 240

 简写

const nums = [10,20,111,222,444,40,50]
let total = nums.filter(function(n){
	return n < 100
	}).map(function(n){
	return n * 2
}).reduce(function(preValue,n){
	return preValue + n
},0)
console.log(total)

 三、箭头函数写法

const nums = [10, 20, 111, 222, 444, 40, 50]
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
console.log(total)

参考：

（掌握）JavaScript 高阶函数逇使用