**案例要求：算出購物車中的總價格，通過計算屬性** ``` //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); ```