如何将获取的数据按照A-Z字母开头排序

饿了么城市排序

如图，饿了么首页中，城市是按照A-Z字母开头排序的，可是接口获取的数据如下：

城市接口数据

以字母A开头的城市有36个，以字母B开头的城市有53个...每个字母开头的城市大抵不一样，而且可能随着中国的发展增加或者减少。那么怎么显示首字母呢。

城市首字母显示

我们可以通过JavaScript的 fromCharCode() 方法来实现。

computed:{
        // 将获取的数据按照A-Z字母开头排序
        sortgroupcity(){
            let sortobj = {};
            for (let i = 65; i <= 90; i++) {
                // this.groupcity为正常请求回来的数据(图2)
                if (this.groupcity[String.fromCharCode(i)]) {
                    sortobj[String.fromCharCode(i)] = this.groupcity[String.fromCharCode(i)];
                }
            }
            return sortobj;
        }
    }

fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。

处理过后的groupcity

可以看出，处理过后的groupcity是一个新对象，key值为城市的首字母，这样，我们在遍历groupcity的时候，key即是首字母。

<ul class="letter_classify">
   <li v-for="(value, key, index) in sortgroupcity" :key="key">
    <h4 class="city_title">
      {{key}} //此处即为首字母
      <span v-if="index == 0">（按字母排序）</span>
    </h4>
    <ul>
        <router-link  tag="li" v-for="item in value" :to="'/city/' + item.id" :key="item.id">
              {{item.name}}
         </router-link>  
     </ul>
    </li>
</ul>

如此，便完成了将获取的数据按照A-Z字母开头排序。