**案例要求：算出购物车中的总价格，通过计算属性** ``` //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); ```