20190126のvue.jsに関する記事は1件です。

vue.jsの引数に関してお聞きしたいです

自己解決しました。。。

どうやらjavascriptのreduce関数の仕様のようですね。
自力での調査が足りていませんでした

こんにちは。

vue.jsの勉強をしているのですが、javascriptの引数に関してわからないことがあるので質問します。

var items = [
    {
        name: '鉛筆†',
        price: 300,
        quantity: 0
    },
    {
        name: 'ノート',
        price: 400,
        quantity: 0
    },
    {
        name: '消しゴム',
        price: 500,
        quantity: 0
    }
]
var vm = new Vue({
    el: '#app',
    data: {
        items: items
    },
    filters: {
        numberWithDelimiter: function (value) {
            if(!value) {
                return '0'
            }
        return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
        }
    },
    computed: {
        totalPrice: function () {
        return this.items.reduce(function (sum,item) {
            return sum + (item.price * item.quantity)
        },0)
    },
    totalPriceWithTax: function() {
        return Math.floor(this.totalPrice * 1.08)
        }
    }   
})

以上が全体のソースコードになります。
この中の、

        totalPrice: function () {
        return this.items.reduce(function (sum,item) {
            return sum + (item.price * item.quantity)
        },0)

の箇所なのですが、
returnしている個所で"item.price"のようにプロパティの内容を引っ張ってきています。

なぜfunction(sum,item)の引数として渡されたitemに、
var itemsで宣言されたプロパティが対応しているのでしょうか?(変数名も一致していませんし...)

どなたか教えていただけると幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む