关于对象遍历的时候的一些排序问题

有空就来看看吧，这些都是为你准备的。

先看下面的代码：

<template>
  <div class="wrap">
    <div v-for="(value, key) in mapData" :key="key">
      <p>key：{{key}}，价格：{{mapData[key].price}}</p>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      mapData:{
        1:{
          price:10,
          name:'我'
        },
        6:{
          price:20,
          name:'我'
        },
        2:{
          price:30,
          name:'我'
        }
      }
    }
  },
  mounted () {
    for(let i in this.mapData){
      console.log(this.mapData[i].price)
    }
  }
}
</script>

key都为number时

控制台输出：

map中的key为number时，会根据key的的大小进行排序，但无论刷新多少次，输出都是一样的，所以输出是固定的，只是顺序和书写顺序不一样

number和string混和

mapData:{
        '我':{
          price:10,
          name:'我'
        },
        6:{
          price:20,
          name:'我'
        },
        2:{
          price:30,
          name:'我'
        }
      }

为number和string混合时，优先number从小到大，再来string

mapData:{
        '1':{
          price:10,
          name:'我'
        },
        6:{
          price:20,
          name:'我'
        },
        2:{
          price:30,
          name:'我'
        }
      }

这种字符串1，在排序过程中会自动进行转换：

key为字母时

mapData:{
        a:{
          price:10,
          name:'我'
        },
        c:{
          price:20,
          name:'我'
        },
        b:{
          price:30,
          name:'我'
        }
      }

为字母时不会重排顺序

字母、number、string混合

mapData:{
        'tc3':{
          price:0,
          name:'我'
        },
        a:{
          price:10,
          name:'我'
        },
        5:{
          price:20,
          name:'我'
        },
        1:{
          price:30,
          name:'我'
        },
        'tc1':{
          price:40,
          name:'我'
        },
        'tc2':{
          price:50,
          name:'我'
        }
      }

可见先试把number的从小到大排了，再剩余的按顺序输出！

结果

对象结构会将number按从小到达顺序提前，再其他类型的key，按照书写顺序输出。