javascript 对数组的对象进行分类

 转换前的数据

        let arr = [
            {name: "第一种",id: "1"},
            {name: "第一种",id: "2"},
            {name: "第二种",id: "4"},
            {name: "第一种",id: "3"},
            {name: "第一种",id: "10"},
            {name: "第二种",id: "5"},
            {name: "第三种",id: "6"},
            {name: "第五种",id: "7"}
        ]

 转换代码

        // 定义一个用来存已经分好类数据的数组
        var arr2 = [];
        // 遍历数组
        for (var i = 0; i < arr.length; i++) {
            // 判断新定义的数组有没有值  没有值则减第一个类给他赋值上去
            if (arr2.length == 0) {
                arr2.push({
                    name: arr[i].name,
                    data: [arr[i]]
                })
            } else { // 第一个完后 后面的有值了 使用findindex()方法进行比较 存在返回下标index 不存在则返回-1
                var index = arr2.findIndex(item => {
                    return item.name == arr[i].name
                });
                // 判断index是否大于0 大于0则在该类的data push进该类别的数据
                if (index >= 0) {
                    arr2[index].data.push(arr[i])
                } else {  // 不存在则新建一个对象  push 进arr2 里面 作为第二个类
                    arr2.push({
                        name: arr[i].name,
                        data: [arr[i]]
                    })
                }
            }
        }

最后分类好的数据

使用场景:  对品种个数不定且需要上下合并该单元格时 

vue写法

      <table border="1" width="300">
        <tbody v-for="(item,index) in arr2" :key="index">
          <tr v-for="(item2,index2) in item.data" :key="index2">
            <td :rowspan="item.data.length" v-if="index2 === 0">{{item2.name}}</td>
            <td>{{item2.id}}</td>
          </tr>
        </tbody>
      </table>