【vue】高阶js函数

一、使用场景介绍

在书籍购物车案例中，计算总价格时，传统的方法是使用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); 
 }