js对象键值按照 A-Z字母排序

最近在维护一个城市选择的组件，发现根据城市首字母组成的json对象的数据在vue循环绑定时，得到的key值不会按照json格式中的A-Z的顺序渲染，存在乱序的情况

取值处理得到的json对象格式如下：

cityOptions：{
    A: [{cityPinyin:’ALASHAN’,cityName: ‘阿拉善'},{cityPinyin:’ANSHAN’,cityName: ‘鞍山’}],
    B: [{cityPinyin:’BEIJING’,cityName: ‘北京'},{cityPinyin:’BAODING’,cityName: ‘保定’}],
    C: [{cityPinyin:’CHONGQING’,cityName: ‘重庆'}],
    D: [{cityPinyin:’DALIAN’,cityName: ‘大连'}],
    E: [{cityPinyin:’EERDUOSI’,cityName: ‘鄂尔多斯'}],
    F: [{cityPinyin:’FOSHAN’,cityName: ‘佛山'}],
    G: [{cityPinyin:’GANZHOU’,cityName: ‘赣州'}],
    H: [{cityPinyin:’HANGZHOU’,cityName: ‘杭州'}],
    J: [{cityPinyin:’JINAN’,cityName: ‘济南'}],
    K: [{cityPinyin:’KUNMING’,cityName: ‘昆明'}],   
    L: [{cityPinyin:’LUOYANG’,cityName: ‘洛阳'}],
    M: [{cityPinyin:’MUDANJIANG’,cityName: ‘牡丹江'}],
    N: [{cityPinyin:’NANJING’,cityName: ‘南京'}],
    P: [{cityPinyin:’PANJIN’,cityName: ‘盘锦'}],
    Q: [{cityPinyin:’QINGDAO’,cityName: ‘青岛'}],
    R: [{cityPinyin:’RIZHAO’,cityName: ‘日照'}],
    S: [{cityPinyin:’SHENZHEN’,cityName: ‘深圳'}],
    T: [{cityPinyin:’TIANJIN’,cityName: ‘天津'}],
    W: [{cityPinyin:’WUHAN’,cityName: ‘武汉'}],
    X: [{cityPinyin:’XIAN’,cityName: ‘西安'}],
    Y: [{cityPinyin:’YANGQUAN’,cityName: ‘阳泉'}],
    Z: [{cityPinyin:’ZHENGZHOU’,cityName: ‘郑州'}],
}

页面渲染部分代码如下：

<div v-for="(list, key, i) in cityOptions" :key="I”>
	<!-- 城市首字母输出 -->
    <span>{{ key }}</span>
    <!-- 城市名字 -->
    <div class="base">
    	<p v-for="item in list" :key="item.cityCd">
        	<span>{{ item.cityName }}</span>
        </p>
    </div>
</div>

解析： 对象本身是无序的，如果你要有序遍历，那你要先制定排序规则，比如按照key的名称a-z 0-1排序

方法：

objKeySort(arys) {
    //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
    let newkey = Object.keys(arys).sort();
    let newObj = {}; //创建一个新的对象，用于存放排好序的键值对
    for(let i = 0; i < newkey.length; i++) {
        //遍历newkey数组
        newObj[newkey[i]] = arys[newkey[i]];
        //向新创建的对象中按照排好的顺序依次增加键值对
    }
    return newObj; //返回排好序的新对象
}

此时页面渲染调用 this.objKeySort(cityOptions) 显示的就是A-Z排序的城市名称