Lodash和JS數據處理（一）

Lodash和JS數據處理（一）

<template>
  <div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      testList: [],
      list: [
        {
          cityName: '鄭州市',
          vmCount: 30
        },
        {
          cityName: '南陽市',
          vmCount: 56
        },
        {
          cityName: '開封市',
          vmCount: 25
        }
      ],
      cloud: [
        {
          cityName: '鄭州市',
          alarmCount: 12
        },
        {
          cityName: '洛陽市',
          alarmCount: 28
        }
      ],
      net: [
        {
          cityName: '鄭州市',
          alarmCount: 25
        },
        {
          cityName: '開封市',
          alarmCount: 18
        },
        {
          cityName: '信陽市',
          alarmCount: 28
        },
        {
          cityName: '許昌市',
          alarmCount: 56
        }
      ]
    }
  },
  methods: {
    cData () {
      this.testList = _.map(this.list, 'vmCount')
      // 保留集合中每一個含有vmCount屬性值，重新組成數組 //this.list集合
      console.log(this.testList)
      this.testList = _.find(this.list, ['vmCount', 56])
      // 不自己循環，只能找到符合條件的最前邊的值
      console.log(this.testList)
      this.testList = _.orderBy(this.list, 'vmCount', 'desc')
      // 集合中的元素按照vmCount升序重新組合
      console.log(this.testList)
      this.testList = _.groupBy(this.list, 'cityName')
      // 以城市名字分組,城市名字相同的在一組，屬性名是城市名
      console.log(this.testList)
    },
    filterData () {
      let resultData = []
      const cloud = this.cloud
      const net = this.net
      const cloudCityNames = _.map(cloud, 'cityName')
      // 選出cloud裏邊的城市，組成數組
      const netCityNames = _.map(net, 'cityName')
      // 選出net裏邊的城市，組成數組
      const CityNames = Array.from(new Set([...cloudCityNames, ...netCityNames]))
      // 將重複的城市名去掉，組生成新數組
      resultData = CityNames.map(city => {
        return [
          city,
          cloud.filter(c => (c.cityName === city))[0] ? cloud.filter(c => (c.cityName === city))[0].alarmCount : 0,
          net.filter(n => (n.cityName === city))[0] ? net.filter(n => (n.cityName === city))[0].alarmCount : 0
        ]
      })
      // 返回city cloud值 net值組成類似於由下邊這樣的元組組成的數組
      // ['洛陽市',12,13]
    }

  },
  mounted () {
    this.cData()
    this.filterData()
  }
}
</script>

<style scoped>

</style>```