zoukankan      html  css  js  c++  java
  • js 分组数组

    思路:

    1、先将数组按照一定规则排序;

    2、再拆分数组到Map中,按Key分类;

    3、再从Map中遍历取出要显示的内容;

    sortBroadList: function (broadcastList) {
                var broadList = broadcastList.sort(function (d1, d2) {
                    var d1ChatAt = (d1.first_pinyin ? d1.first_pinyin.toString().charCodeAt(0) : 91);
                    var d2ChatAt = (d2.first_pinyin ? d2.first_pinyin.toString().charCodeAt(0) : 91);
                    return d2ChatAt - d1ChatAt;
                }).reverse();
    
                var result = new Map();
                for (var item of broadList) {
                    var pinyin = item.first_pinyin ? item.first_pinyin : '#';
                    if (result.get(pinyin)) {
                        result.get(pinyin).values.push(item);
                    } else {
                        result.set(pinyin, {key: pinyin, values: [item]});
                    }
                }
    
                uc.util.LogUtil.info('ContactManager', 'sortBroadList', 'sort broadcastlist result:', {
                    broadList: broadList
                });
                return result;
            },
    
            loadBroadcastItem: function (broadcastList) {
                var parentPanel = _this.getLatestClickedContactsPanel();
                var ul = parentPanel.find('.broadcast-parent');
                ul.empty();
                var broadList = _this.sortBroadList(broadcastList);
                broadList.forEach(function (item) {
                    var hasAlphabetical = ul.find(`li[alphabetical-key="${item.key}"]`);
                    if (!hasAlphabetical.length) {
                        ul.append(_this.getAlphabetical(item.key));
                    }
                    for (var broadcast of item.values) {
                        ul.append(_this.getBroadcastTpl(broadcast));
                        _this.broadcastCache.addContact(broadcast.board_id, broadcast);
                    }
                });
            },

    结果:

  • 相关阅读:
    前端学习笔记系列一:5 在项目中引入阿里图标icon
    前端学习笔记系列一:3 Vue中的nextTick
    前端学习笔记系列一:4 vue中@click.native
    学习习惯
    美团作价27亿美元正式收购摩拜
    北京 一卡通 退卡
    愚人自以慧,智者自以愚。
    袁隆平分享8字成功经验
    性能计数器 叹号
    升级 windows 2016
  • 原文地址:https://www.cnblogs.com/307914070/p/6226532.html
Copyright © 2011-2022 走看看