如何在 Javascript / vuejs 中求和两个相似的对象

Question

我有一个对象，我需要将每个

value

与另一个类似的对象独立求和，如本例所示：

CharacterStats: { a: 0, b: 2, c: 0, d: 0 }
ItemStats: { a: 0, b: -1, c: 4, d: 0 }

结果应该是：

CharacterStats: { a: 0, b: 1, c: 4, d: 0 }

我找到了这个答案如何在javascript中求和两个对象值但是我使用的是vueJS，所以我的函数看起来像这样：

export default {
  data () {
    return {
      CharacterStats: { a:0, b:0, c:0, d:0 }
    };
  },
  methods: {
    calculStatsItems(ItemsStats)  {
      var obj = {};
      Object.keys(this.CharacterStats ).forEach(function(a){
        obj[a] = this.CharacterStats.stat[a] +ItemsStats[a]
      })
      console.log(obj);
    }
  },
}

但我不断收到错误消息

这是未定义的

在这一行：

Object.keys(this.CharacterStats ).forEach(function(a)

还有其他方法可以做到或修复它吗？

Answer 1

您可以获取两个对象的值，然后进行操作，执行如下操作：

sum(values) {
  return values.reduce((a, b) => a + b, 0);
}

calculStatsItems(arr1, arr2) {
  const prepareData = [...Object.values(arr1), ...Object.values(arr2)];
  return this.sum(prepareData);
}

Answer 2

在

.forEach

函数中，

this

并不引用

vue

组件实例，因此

CharacterStats

变为

undefined

。试试这个：

const CharacterStats = { a: 0, b: 2, c: 0, d: 0 };
const ItemStats = { a: 0, b: -1, c: 4, d: 0 };

new Vue({
  el:"#app",
  data: () => ({
    CharacterStats: { a: 0, b: 2, c: 0, d: 0 }
  }),
  created() {
    this.calculStatsItems({ a: 0, b: -1, c: 4, d: 0 });
  },
  methods: {
    calculStatsItems(ItemsStats) {
      const obj = {};
      Object.keys(this.CharacterStats).forEach(a => {
        obj[a] = this.CharacterStats[a] + (ItemsStats[a] || 0)
      });
      console.log(obj);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>