Vue.js新手求助：提取counterTraffic的kendaraan值生成纯数值数组

针对你提供的counterTraffic数组，要提取每个元素的kendaraan子数组内的对象值生成纯数值数组，可以通过以下几种简单的方法实现：

方法一：使用数组map和Object.values（推荐） #

这是最简洁的方式，利用数组的map方法遍历每个对象，再通过Object.values获取对象的数值（因为每个kendaraan子项都是单键值对的对象，取数组第一个元素即可）。

处理单个元素的示例 #

// 提取counterTraffic[0].kendaraan的数值
const kendaraanNew = counterTraffic[0].kendaraan.map(item => Object.values(item)[0])
// 结果：[50,22,30,70]

处理整个counterTraffic数组 #

如果需要把所有元素的kendaraan都转换成纯数值数组：

const allKendaraanArrays = counterTraffic.map(trafficItem => {
  return trafficItem.kendaraan.map(kObj => Object.values(kObj)[0])
})
// 结果会是一个二维数组：[[50,22,30,70], [80,15,10,50], [30,65,20,100], [20,15,5,150]]

方法二：使用循环（适合新手理解） #

如果你对数组方法不太熟悉，可以用for...of循环逐步提取数值：

// 处理单个元素
const targetKendaraan = counterTraffic[0].kendaraan
let kendaraanNew = []
for (const obj of targetKendaraan) {
  // 遍历对象的数值（每个对象只有一个值）
  const values = Object.values(obj)
  kendaraanNew.push(values[0])
}
// 结果：[50,22,30,70]

在Vue组件中的使用示例 #

你可以把处理逻辑放到计算属性中，方便在模板中使用：

<template>
  <div>
    <!-- 示例：展示第一个地区的车辆数值 -->
    <div>Bandung第一组车辆数据：{{ processedKendaraan[0] }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counterTraffic: [
        {
          id: 1,
          daerah: "Bandung",
          date:"1668790800000",
          kendaraan: [
            {rodaEmpat: 50},
            {rodaDua: 22},
            {truck: 30},
            {Bus: 70},
          ]
        },
        {
          id: 2,
          daerah: "Tasik",
          date:"1668877200000",
          kendaraan: [
            {rodaEmpat: 80},
            {rodaDua: 15},
            {truck: 10},
            {Bus: 50},
          ]
        },
        {
          id: 3,
          daerah: "Bekasi",
          date:"1669050000000",
          kendaraan: [
            {rodaEmpat: 30},
            {rodaDua: 65},
            {truck: 20},
            {Bus: 100},
          ]
        },
        {
          id: 4,
          daerah: "Bandung",
          date:"1668963600000",
          kendaraan: [
            {rodaEmpat: 20},
            {rodaDua: 15},
            {truck: 5},
            {Bus: 150},
          ]
        }
      ]
    }
  },
  computed: {
    processedKendaraan() {
      return this.counterTraffic.map(traffic => {
        return traffic.kendaraan.map(kObj => Object.values(kObj)[0])
      })
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者irahama