💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
**案例要求:算出购物车中的总价格,通过计算属性** ``` //barbecue是一个数组,price是价格,count是数量 computed: { totalPrice() { // 1.一般遍历写法,for循环 let totalPrice = 0 //总价格 for (let i = 0; i < this.barbecue.length; i++) { totalPrice += this.barbecue[i].price * this.barbecue[i].count } return totalPrice //2.for in 写法,i和上面一样是索引值 let totalPrice = 0 for (let i in this.barbecue) { totalPrice += this.barbecue[i].price * this.barbecue[i].count } return totalPrice // 3.for of 写法,此处item是每一项的值 let totalPrice = 0 for (let item of this.barbecue) { totalPrice += item.price * item.count } return totalPrice //4.高阶函数reduce写法: return this.barbecue.reduce(function(preValue, item){ return preValue + item.price * item.count },0) } }, ``` ### 扩展:高阶函数 ``` 高阶函数:可以把方法作为参数传入,也就是传入回调函数,回调函数也可以用箭头函数简化写法 高阶函数:filter/reduce/map 实例要求:将数组中小于100的每个数乘以2然后相加 1.filter 函数:有一个要求,必须返回布尔值 当返回为的值true时:函数会自动将这次回调的值(这里是n)加入到新的数组中 当返回的值为false时:函数内部会过滤掉这次的值(这里是n) 如: 有一个数组:const nums = [10,20,30,40,50,80,120,130],要求取出小于100的数据 let newNums = nums.filter(function (n){ return n < 100 //当n的值小于100时,会自动添加到newNums数组中,会自动遍历数组的length-1次 }) 2.map 函数的使用:使用回调函数,做运算,返回每一项运算后的值,改变数组每一项的值 如:让数组每一项的值都乘以2 let newNums = nums.map(function(n){ return n * 2 //此时nums数组中的每一项都x2保存在newNums中,会自动遍历数组的length-1次 }) 3.reduce 函数:对数组中所有的内容进行汇总(如:相加,相乘) 如:将数组所有值相加:const nums = [10,20,30,40,50,80,120,130] let total = nums.reduce(function(preVal,n){ //第一个参数preVal:就是每次遍历返回(return)的值(preVal + n):例如第一次遍历:preVal:0,第二次遍历:preVal:10 //第二个参数n : 每次遍历的值,例如第一次遍历:n : 10,第二次遍历:n : 20 return preVal + n //遍历完后会把所有的值相加 },0) //0表示默认值 ``` ## 函数式编程的链式操作:同时使用多个函数 ``` 写法一: let total = nums.filter(function (n){ return n < 100 //当n的值小于100时,会自动添加到newNums数组中,会自动遍历数组的length-1次 }).map(function(n){ return n * 2 //此时nums数组中的每一项都x2保存在newNums中,会自动遍历数组的length-1次 }).reduce(function(preVal,n){ return preVal + n //遍历完后会把所有的值相加 },0) //0表示默认值 写法二:更简洁 let total = nums.filter(n=> n < 100).map(n=>n * 2).reduce((preVal,n)=> pre + n); ```