我有一个对象,我需要将每个
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)
还有其他方法可以做到或修复它吗?
您可以获取两个对象的值,然后进行操作,执行如下操作:
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);
}
在
.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>