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

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

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

先看下面的代码:

<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时

f0125ecb032840139b1d079794006ae3.png

d978557657a54310959dd503033aa55b.png

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

number和string混和

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

f3a382ae0b8641fc9a0086955a4411b2.png

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

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

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

251705156a5d4dd0914e086f18b7621b.png

key为字母时

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

ebd0c73ed7ae40c4b54468a55e9e1573.png

为字母时不会重排顺序

字母、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:'我'
        }
      }

7318cb214ac24641a928b82466251fcd.png

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

结果

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

相关文章
|
3月前
集合中常见方法及遍历方式
集合中常见方法及遍历方式
28 1
Map集合的有序遍历,解决方法多看一下别人的资料
Map集合的有序遍历,解决方法多看一下别人的资料
|
6月前
判断两个不重复的list集合是否相等 只比较元素值 不比较顺序
判断两个不重复的list集合是否相等 只比较元素值 不比较顺序
61 0
|
6月前
各种遍历方法以及注意点
各种遍历方法以及注意点
46 0
|
算法
使用遍历方法和分治法求两个数组的值
看似简单的姐数组中的最大值实际上体现了不同的思路本文将以比较数组大小为背景,分别展示普通算法和分治法,通过对比来简述分治法。 问题描述 给定一个整数数组,编写一个算法来找到数组中的最大值和最小值。
72 0
逆序遍历List集合
逆序遍历List集合
65 0
|
Java
Java数组、排序和查找
Java数组、排序和查找
78 0
|
PHP 开发者
对象遍历|学习笔记
快速学习对象遍历
对象遍历|学习笔记
v-for遍历对象、数组
v-for遍历对象、数组
120 0
|
存储 分布式计算 并行计算
如何1分钟内完成遍历100T数据?
如何1分钟内完成遍历100T数据?
320 0
如何1分钟内完成遍历100T数据?