一、使用场景介绍
在书籍购物车案例中,计算总价格时,传统的方法是使用for循环进行计算,这样虽然好理解,但是代码量大,可读性不高。代码如下:
totalprice(){
let totalPrice = 0;
//1.最普通的for循环
for(let i =0;i<this.books.length;i++){
totalPrice += this.books[i].price*this.books[i].count;
}
//2.for(let i in books)
for(let i in this.books){
//这样拿到的也是索引值
totalPrice += this.books[i].price*this.books[i].count;
}
//3.for(let i of books)
for(let item of this.books){
//这样拿到不是索引值
totalPrice += item.price*item.count;
}
return totalPrice;
}
二、高阶函数介绍
现在有一个数组
const nums = [10,20,30,111,205,333,40];
现在有三个需求:
第一个需求:找出数组中所有小于100的值
第二个需求:在满足第一个需求的前提下,对所有值乘以2
第三个需求:在满足第二个需求后,将所有值相加求结果
2.1命令式编程实现
//没有学过函数式编程:而是命令式编程-----------------------------------------------------------------------
//第一个命令,取出所有小于100的数字
const nums = [10,20,30,111,205,333,40];
let newNum = [];
for(let n of nums){
if(n<100){
newNum.push(n);
}
}
console.log("命令式编程输出:",newNum);
//第二个命令,取出来的数字全部乘以2
let new2Num = [];
for(let n of newNum){
new2Num.push(n*2);
}
console.log("命令式编程输出:",new2Num);
//第三个命令,数字全部相加
let total = 0;
for(let n of new2Num){
total+=n;
}
console.log("命令式编程输出:",total);
2.2函数式编程实现※
//函数式编程:filter/reduce/map/find/findIndex
//filter使用:---------------------------------------------------------------------------------------------------
//每次遍历一个数时候,都会执行一下funtion函数,
//funtion有一个要求:必须返回一个布尔值,当返回true时,函数内部会自动将这次回调的n加入到新的数组中
//当返回false时,会过滤掉这个n
let newNums=nums.filter(function(n){
return n<100;
})
//function也可以传入多个参数,第一个参数是数组的每个值,第二个参数代表每个值的下标,第三个参数代表数组的引用
//filter除了传入一个function作为参数外,还可以传入第二个参数,作用是this指向,如果不传,那么function是独立调用的,this指向window
let newNums=nums.filter(function(item,index,arr){
return item<100;
console.log(this);//"abc"
},“abc”)
console.log("filter输出:",newNums);
//map:-------------------------------------------------------------
//作用:会把每个值进行处理并返回一个新的数组
let new2Nums=newNums.map(function(n){
return n*2;
})
console.log("map输出:",new2Nums);// 20 40 60 80
//reduce-----------------------------------------------------------------------------
//对数组中所有的内容进行汇总,preValue是上一次返回的值,0是初识值
//遍历四次:
//第一次:preValue:0(初始化值) n:20
//第二次:preValue:20 n:40
//第三次:preValue:60 n:60
//第四次:preValue:120 n:80
//结果返回200
let totalresult = new2Nums.reduce(function(preValue,n){
return preValue+n;
},0);
console.log("reduce输出:",totalresult);
//三个函数结合---------------------------------------
let totalre = nums.filter(function(n){
return n<100;
}).map(function(m){
return m*2;
}).reduce(function(prevalue,r){
return prevalue+r;
},0)
console.log("三个函数结合输出:",totalre);
//终极最简洁写法-------------------------------------
let totalre2 = nums.filter(n=>n<100).map(m=>m*2).reduce((prevalue,r)=>prevalue+r,0);
console.log("终极最简洁写法:",totalre2);
//find/findIndex使用:-------------------------------------------------------------
三、使用函数式编程对(一)中的场景代码替换
totalprice(){
return this.books.reduce((p,n)=>p+n.price*n.count,0);
}