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>```