首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js数据如何分组排序?

js数据如何分组排序?

作者头像
Javanx
发布2019-09-04 15:37:28
2.8K0
发布2019-09-04 15:37:28
举报
文章被收录于专栏:web秀web秀

前言

前面通过两章,细致的讲解了数组的方法,而且提供了简单的例子,相信大家都有初步的了解了,而且也相信大家都有所得,今天来实战,数据如何分组呢?要应用数组的那些知识呢?

如果还没有学习前面两章的,请点击:

你对JavaScript的Array对象了解有多少?

ES6中Array数组你应该知道的操作

数据

下面提供杂乱无章的国家数据,包括中文名和英文名。其中,英文名是key,中文名是值。

{ "Afghanistan": "阿富汗", "Angola": "安哥拉", "Albania": "阿尔巴尼亚", "United Arab Emirates": "阿联酋", "Argentina": "阿根廷", "Armenia": "亚美尼亚", "French Southern and Antarctic Lands": "法属南半球和南极领地", "Australia": "澳大利亚", "Austria": "奥地利", "Azerbaijan": "阿塞拜疆", "Burundi": "布隆迪", "Belgium": "比利时", "Benin": "贝宁", "Burkina Faso": "布基纳法索", "Bangladesh": "孟加拉国", "Bulgaria": "保加利亚", "The Bahamas": "巴哈马", "Bosnia and Herzegovina": "波黑", "Belarus": "白俄罗斯", "Belize": "伯利兹", "Bermuda": "百慕大", "Bolivia": "玻利维亚", "Brazil": "巴西", "Brunei": "文莱", "Bhutan": "不丹", "Botswana": "博茨瓦纳", "Central African Republic": "中非共和国", "Canada": "加拿大", "Switzerland": "瑞士", "Chile": "智利", "China": "中国", "Ivory Coast": "象牙海岸", "Cameroon": "喀麦隆", "Democratic Republic of the Congo": "刚果(金)", "Republic of the Congo": "刚果(布)", "Colombia": "哥伦比亚", "Costa Rica": "哥斯达黎加", "Cuba": "古巴", "Northern Cyprus": "北塞浦路斯", "Cyprus": "塞浦路斯", "Czech Republic": "捷克", "Germany": "德国", "Djibouti": "吉布提", "Denmark": "丹麦", "Dominican Republic": "多米尼加共和国", "Algeria": "阿尔及利亚", "Ecuador": "厄瓜多尔", "Egypt": "埃及", "Eritrea": "厄立特里亚", "Spain": "西班牙", "Estonia": "爱沙尼亚", "Ethiopia": "埃塞俄比亚", "Finland": "芬兰", "Fiji": "斐", "Falkland Islands": "福克兰群岛", "France": "法国", "Gabon": "加蓬", "United Kingdom": "英国", "Georgia": "格鲁吉亚", "Ghana": "加纳", "Guinea": "几内亚", "Gambia": "冈比亚", "Guinea Bissau": "几内亚比绍", "Equatorial Guinea": "赤道几内亚", "Greece": "希腊", "Greenland": "格陵兰", "Guatemala": "危地马拉", "French Guiana": "法属圭亚那", "Guyana": "圭亚那", "Honduras": "洪都拉斯", "Croatia": "克罗地亚", "Haiti": "海地", "Hungary": "匈牙利", "Indonesia": "印度尼西亚", "India": "印度", "Ireland": "爱尔兰", "Iran": "伊朗", "Iraq": "伊拉克", "Iceland": "冰岛", "Israel": "以色列", "Italy": "意大利", "Jamaica": "牙买加", "Jordan": "约旦", "Japan": "日本", "Kazakhstan": "哈萨克斯坦", "Kenya": "肯尼亚", "Kyrgyzstan": "吉尔吉斯斯坦", "Cambodia": "柬埔寨", "South Korea": "韩国", "Kosovo": "科索沃", "Kuwait": "科威特", "Laos": "老挝", "Lebanon": "黎巴嫩", "Liberia": "利比里亚", "Libya": "利比亚", "Sri Lanka": "斯里兰卡", "Lesotho": "莱索托", "Lithuania": "立陶宛", "Luxembourg": "卢森堡", "Latvia": "拉脱维亚", "Morocco": "摩洛哥", "Moldova": "摩尔多瓦", "Madagascar": "马达加斯加", "Mexico": "墨西哥", "Macedonia": "马其顿", "Mali": "马里", "Myanmar": "缅甸", "Montenegro": "黑山", "Mongolia": "蒙古", "Mozambique": "莫桑比克", "Mauritania": "毛里塔尼亚", "Malawi": "马拉维", "Malaysia": "马来西亚", "Namibia": "纳米比亚", "New Caledonia": "新喀里多尼亚", "Niger": "尼日尔", "Nigeria": "尼日利亚", "Nicaragua": "尼加拉瓜", "Netherlands": "荷兰", "Norway": "挪威", "Nepal": "尼泊尔", "New Zealand": "新西兰", "Oman": "阿曼", "Pakistan": "巴基斯坦", "Panama": "巴拿马", "Peru": "秘鲁", "Philippines": "菲律宾", "Papua New Guinea": "巴布亚新几内亚", "Poland": "波兰", "Puerto Rico": "波多黎各", "North Korea": "朝鲜", "Portugal": "葡萄牙", "Paraguay": "巴拉圭", "Qatar": "卡塔尔", "Romania": "罗马尼亚", "Russia": "俄罗斯", "Rwanda": "卢旺达", "Western Sahara": "西撒哈拉", "Saudi Arabia": "沙特阿拉伯", "Sudan": "苏丹", "South Sudan": "南苏丹", "Senegal": "塞内加尔", "Solomon Islands": "所罗门群岛", "Sierra Leone": "塞拉利昂", "El Salvador": "萨尔瓦多", "Somaliland": "索马里兰", "Somalia": "索马里", "Republic of Serbia": "塞尔维亚", "Suriname": "苏里南", "Slovakia": "斯洛伐克", "Slovenia": "斯洛文尼亚", "Sweden": "瑞典", "Swaziland": "斯威士兰", "Syria": "叙利亚", "Chad": "乍得", "Togo": "多哥", "Thailand": "泰国", "Tajikistan": "塔吉克斯坦", "Turkmenistan": "土库曼斯坦", "East Timor": "东帝汶", "Trinidad and Tobago": "特里尼达和多巴哥", "Tunisia": "突尼斯", "Turkey": "土耳其", "United Republic of Tanzania": "坦桑尼亚", "Uganda": "乌干达", "Ukraine": "乌克兰", "Uruguay": "乌拉圭", "United States of America": "美国", "Uzbekistan": "乌兹别克斯坦", "Venezuela": "委内瑞拉", "Vietnam": "越南", "Vanuatu": "瓦努阿图", "West Bank": "西岸", "Yemen": "也门", "South Africa": "南非", "Zambia": "赞比亚", "Zimbabwe": "津巴布韦", "Singapore Rep.": "新加坡", "Dominican Rep.": "多米尼加", "Palestine": "巴勒斯坦", "Bahamas": "巴哈马", "Timor-Leste": "东帝汶", "Guinea-Bissau": "几内亚比绍", "Côte d'Ivoire": "科特迪瓦", "Siachen Glacier": "锡亚琴冰川", "Br. Indian Ocean Ter.": "英属印度洋领土", "Bosnia and Herz.": "波斯尼亚和黑塞哥维那", "Central African Rep.": "中非", "Dem. Rep. Congo": "刚果民主共和国", "Congo": "刚果", "N. Cyprus": "北塞浦路斯", "Czech Rep.": "捷克", "Eq. Guinea": "赤道几内亚", "Korea": "韩国", "Lao PDR": "老挝", "Dem. Rep. Korea": "朝鲜", "W. Sahara": "西撒哈拉", "S. Sudan": "南苏丹", "Solomon Is.": "所罗门群岛", "Serbia": "塞尔维亚", "Tanzania": "坦桑尼亚", "United States": "美国" }

实战操作

第一步

把上面的obj赋值一个变量,如let data = obj,这里的obj就是上面的数据

let data = { "Afghanistan": "阿富汗", "China": "中国", "Angola": "安哥拉", "Canada": "加拿大", "Brazil": "巴西"};
let map = {}; // 处理过后的数据对象
let temps = []; // 临时变量
for(let key in data) {
  let ekey = key.charAt(0).toUpperCase(); // 根据key值的第一个字母分组,并且转换成大写
  temps = map[ekey] || []; // 如果map里面有这个key了,就取,没有就是空数组
  temps.push({
    en: key,
    cn: data[key]
    });
  map[ekey] = temps;
}
console.log(map);
// 打印看看数据
// {
//   A: [{ 
//       en: 'Afghanistan',
//       cn: '阿富汗'
//   },{ 
//       en: 'Angola',
//       cn: '安哥拉'
//     }],
//   C: [{ 
//     en: 'China', 
//     cn: '中国'
//   },{
//     en: 'Canada',
//     cn: '加拿大'
//   }],
//   B: [{
//     en: 'Brazil', 
//     cn: '巴西'
//   }]
// }

第二步

let list = [];
for(let gkey in map) {
  list.push({
    gkey: gkey,
    countrys: map[gkey]
  })
}
console.log(list);
//[{
//  gkey: "A",
//  countrys: [{
//    en: "Afghanistan",
//    cn: "阿富汗"
//  }, {
//    en: "Angola",
//    cn: "安哥拉"
//  }]
//}, {
//  gkey: "C",
//  countrys: [{
//    en: "China",
//    cn: "中国"
//  }, {
//    en: "Canada",
//    cn: "加拿大"
//  }]
//}, {
//  gkey: "B",
//  countrys: [{
//    en: "Brazil",
//    cn: "巴西"
//  }]
//}]

第三步

list = list.sort((li1, li2)=> li1.gkey.charCodeAt(0) - li2.gkey.charCodeAt(0));
console.log(list);
//[{
//  gkey: "A",
//  countrys: [{
//    en: "Afghanistan",
//    cn: "阿富汗"
//  }, {
//    en: "Angola",
//    cn: "安哥拉"
//  }]
//}, {
//  gkey: "B",
//  countrys: [{
//    en: "Brazil",
//    cn: "巴西"
//  }]
//}, {
//  gkey: "C",
//  countrys: [{
//    en: "China",
//    cn: "中国"
//  }, {
//    en: "Canada",
//    cn: "加拿大"
//  }]
//}]

结语

轻送搞定,分组加排序,这样的数据结构可以用在什么场所了?当然是选择器上面啦,如国家选择组件,城市选择组件等等,如果后台没有给你分好组,前端也可以搞定咯,求人不如求己。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年8月23日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 数据
  • 实战操作
    • 第一步
      • 第二步
        • 第三步
        • 结语
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档