城市列表（二）02-城市列表数据重构——sort()-数组排序 & substr(0, 1)-字符串截取 & push（）-数组追加

城市列表（二）02-城市列表数据重构——sort()-数组排序 & substr(0, 1)-字符串截取 & push（）-数组追加

• 分析数据结构

// 已有数据结构
[{label:'北京',value:'',pinyin:'beijing',short:'bj'}]
// 所需数据
[{label:'北京',value:'AREA|88cff55c-aaa4-e2e0'}]
// 设计数据->添加分组标题
var cityobj = {
  'a':[{label:'安庆',value:'AREA|88cff55c-aaa4-e2e0'},.....],
  'b':[{label:'北京',value:'AREA|88cff55c-aaa4-e2e0'},{label:'宝鸡',value:'AREA|88cff55c-aaa4-e2e0'},...],
  'c':[{label:'长沙',value:'AREA|88cff55c-aaa4-e2e0'},....]
}
// 考虑按照a->b->c排序 所以需要通过数组控制
var indexs = ['a','b','c',......]
// 结论: 通过数组的索引找a->通过a找对象中的城市数组

• 数据格式处理

function formatCityData(data) {
  // data->原始数据数组
  let citylist = {}
  let cityIndex = []
  data.map(item => {
    // item->{label:'北京',value:'',pinyin:'beijing',short:'bj'}
    const first = item.short.substr(0, 1) // first->'a' 'b' ...
    // citylist[first] = [item]
    if (first in citylist) {
      // 判断对象中是否存在属性
      citylist[first].push(item)
    } else {
      citylist[first] = [item]
    }
    // 已有: citylist -> {a:[],b:[],c:[].....}
    //需要的 ['a','b','c',......]
    // 取出citylist所有的key->保存在数组中->sort()

    cityIndex = Object.keys(citylist).sort()
  })
  return {
    cityIndex,
    citylist
  }
}

现用处理代码

translateDataFormat = (data) => {
    // 把原始的城市列表数据转化为对象格式
    /*
      {
        a: [{}, {}, {}],
        b: [{}, {}, {}],
        c: [{}, {}, {}]
        ......
      }
    */
    let objCityList = {}
    let indexList = []

    // 实现城市列表数据分组：根据城市的首字母进行划分
    data.forEach(item => {
      // 获取城市的首字母
      // substr() 的参数指定的是子串的开始位置和长度
      let firstLetter = item.short.substr(0, 1)
      if (objCityList[firstLetter]) {
        // objCityList对象中包含该字符
        objCityList[firstLetter].push({
          label: item.label,
          value: item.value,
          short: item.short
        })
      } else {
        // objCityList对象中不包含该字符
        objCityList[firstLetter] = [{
          label: item.label,
          value: item.value,
          short: item.short
        }]
        // 如果列表中不包含该首字母就添加到对应索引
        indexList.push(firstLetter)
      }
    })
    
    // 对数组中的首字母进行排序  a——>z;1——>100;数字优先
    indexList.sort()

    return {
      objCityList,
      indexList
    }
  }

城市首字母排序效果