时间戳

首页 > 解决方案 > 如何平均两个具有相同元素的数组？

vue.js - 如何平均两个具有相同元素的数组？

问题描述

我有两个数组。例如，我想对它们中的每一个的第一个索引进行平均。使用 Vue 解决此问题的最佳方法是什么？我计划对所有索引进行平均，但现在想了解如何仅对一个元素进行平均。

new Vue({
  el: "#app",
  data: {
    array1: [
      { pizza: "20" },
      { popcorn: "7"},
      { pretzel: "15"},
      { fries: "11"}
    ],
    array2: [
      { pizza: "9" },
      { popcorn: "17"},
      { pretzel: "5"},
      { fries: "4"}
    ]
  },
  methods: {
  
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  average pizza = {{array1[0] + array2[0] / 2}}
</div>

标签： vue.jsvuejs2

解决方案

您可以创建一个接受索引并返回平均值的方法。要获得价值，只需使用Object.keys[0], 转换为Number使用一元运算+符。

methods: {
  getAvarageByIndex(index) {
    return (+Object.values(this.array1[index])[0] + +Object.values(this.array2[index])[0]) / 2;
  }
}


new Vue({
  el: "#app",
  data: {
    array1: [{
        pizza: "20"
      },
      {
        popcorn: "7"
      },
      {
        pretzel: "15"
      },
      {
        fries: "11"
      }
    ],
    array2: [{
        pizza: "9"
      },
      {
        popcorn: "17"
      },
      {
        pretzel: "5"
      },
      {
        fries: "4"
      }
    ]
  },
  methods: {
    getAvarageByIndex(index) {
      return (+Object.values(this.array1[index])[0] + +Object.values(this.array2[index])[0]) / 2;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <span>{{ getAvarageByIndex(2) }}</span>
  </div>
</div>

推荐阅读