vueでreduceメソッドを久しぶりに用いて混乱した部分があるので整理した。
また、オブジェクトにreduceを用いて解説した記事はなかったので自分でまとめた。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>合計:{{ totalPrice }}</p>
</div>
<script>
const items = [
{
name: '鉛筆',
price: 300,
quantity: 3
},
{
name: 'ノート',
price: 400,
quantity: 4
},
{
name: '消しゴム',
price: 500,
quantity: 1
},
]
const vm = new Vue({
el: '#app',
data: {
items: items
},
computed: {
totalPrice: function () {
return this.items.reduce(function (sum, item) {
return sum + (item.price * item.quantity)
},0)
},
}
})
</script>
</body>
この時の reduce の挙動を totalPrice のなかで初期値などを変えつつ整理する
ケース1：初期値を0としたとき
ソースコード
totalPrice: function () {
return this.items.reduce(function (sum, item) {
return sum + (item.price * item.quantity)
},0)
| 1回目 | 2回目 | 3回目 | |
|---|---|---|---|
| sum | 0 | 900 | 2500 |
| item | オブジェクト（鉛筆の内容） | オブジェクト（ノートの内容） | オブジェクト（消しゴムの内容） |
reduce は配列の内容を出力するので1回目の item はオブジェクト（鉛筆の内容）となります。
2回目の sum では1回目の戻り値が入るので、 sum(初期値0) + (300 * 3) の値となり900 となります。
3回目の sum では2回目の戻り値が入るので、 sum(0 + 900) + (400 * 4) の値となり2500 となります。
最後の return sum + (item.price * item.quantity) では3回目の戻り値が sum に入り 2500 + (500（消しゴムの値段） * 1)となるので 3000 となります。
ケース2:初期値を設定しないとき
ソースコード
totalPrice: function () {
return this.items.reduce(function (sum, item) {
return sum + (item.price * item.quantity)
})
| 1回目 | 2回目 | 3回目 | |
|---|---|---|---|
| sum | オブジェクト（鉛筆の内容） | [object Object]1600 | なし |
| item | オブジェクト（ノートの内容) | オブジェクト（消しゴムの内容） | なし |
1回目の sum に入る値は items[0] つまり鉛筆のオブジェクトとなるので各値は上記のようになります。
1回目の item は 配列の2番目の要素が入るので、index[1]が対象となり、 オブジェクト（ノートの内容) となります。
2回目の sum は1回目の戻り値が入るので オブジェクト（ノートの内容) + （400 * 4）となり [object Object]1600 となります。
2回目の item は配列の3番目の要素が入るので、index[2] が対象となり、 オブジェクト（消しゴムの内容) となります。
3回目の sum はすでに2回目の item で items の要素を出力し切っているので実行されません。
3回目の item はこちらも試行回数は終わっているので実行されません。
最後の return sum + (item.price * item.quantity) では2回目の戻り値が sum に入るので、 [object Object]1600 + 500 となります。[object Object]1600は文字列とみなされてこのような表記になると思います。