js implements object array grouping and grouping query (2 ways)

1. Target effect

   The specific code is below, all written in App.vue, just copy and paste to run

 

 

 

2. Principle analysis

(1) Prepare an array of objects, similar to this [ {title: 'B', name: 'Beijing'} ], and determine the grouping basis

(2) Put the grouping operation of the object array in computed

(3) How to group? Traverse the array (for loop, foreach), create an empty object in the loop, add qualified values ​​to the object, and finally return an object, the key value is the group name, and the value is an array of multiple data

(4) list.reduce((accumulator, item)=>{}, {}), reuce has two parameters , the first parameter passes the callback function for accumulation, and the second parameter is the initial value of the accumulation result , because We finally want to splicing into an object, so the initial value is {} empty object; the first parameter of the callback function is the accumulator , which is the same type as the second parameter of reduce, and the second value of the callback function is each in the array Items, in general, reduce is to perform some operations through the accumulator and the current value, and return a new accumulation result, which can convert an array into an object!

3. Specific code

<template>
  <div id="app">
    <el-input placeholder="请输入搜索条件" style="width:300px;" v-model="searchInput"></el-input>
    <dl v-for="(item, key, index) in searchList" :key="index">
        <dt>{
   
   { key }}</dt>
        <dd v-for="(i,j) in item" :key="j">{
   
   { i.name }}</dd>
    </dl>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      searchInput: '',    // 搜索条件
      lists:[             // 对象数组
        {title: 'B', name: '北京'},
        {title: 'B', name: '保定'},
        {title: 'B', name: '北海'},
        {title: 'C', name: '长春'},
        {title: 'C', name: '常德'},
        {title: 'A', name: '安庆'},
        {title: 'D', name: '大庆'},
        {title: 'D', name: '东莞'},
        {title: 'F', name: '福州'},
        {title: 'F', name: '抚州'},
      ]
    }
  },
  computed:{
    // 将对象数组进行分组（方法一：foreach）
    list(){    
      let groups = {}
      this.lists.forEach(item=>{
        // item为对象数组中的每个对象，此处根据title进行分组

        // value为组名
        let value = item['title'];

        // 新对象groups判断有无相对应组名，有则保留，否则为空数组
        groups[value] = groups[value] || [];
    
        // 向这个组插入数据
        groups[value].push(item)
      })
      // 返回这个经过分组过后的对象
      return groups
    },
    // 将对象数组进行分组（方法二：reduce）
    list2(){
      // rv为累加器，current为对象数组中的每一项即是一个对象
      return this.lists.reduce((rv,current)=>{
          (rv[current['title']]=rv[current['title']]||[]).push(current)
          return rv
      },{})
    },
    // 搜索分组
    searchList(){
      let obj = {}

      // citys为上面对象数组经过分组过后的数据
      let citys = this.list;

      if(this.searchInput == ''){
        // 搜索为空，则返回初始分组后的数据
        return this.list
      }else{
        // 搜索不为空，通过for in 对  对象进行遍历
        for (let key in citys) {

          // key为组名，citys[key] 为组名下的多个数据，即城市列表，城市列表下的城市名与搜索条件进行比较，然后筛选出能够找到的城市

          let searchResult = citys[key].filter( item=>{ 
            return item.name.indexOf(this.searchInput) != -1 
          })
          
          // 搜索到目标结果，则返回相对应拼接后的对象
          if(searchResult.length > 0){
            obj[key] = searchResult
            return obj
          }
        }
      }
    }
  }
}
</script>

<style>
#app {
  text-align: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}
</style>