今天在一个项目中用到了for in 语句,遇到了一个坑
例如这是一个vue文件
<script>
//我有一个对象
export default {
data() {
return {
list: {
"2": "小明",
"0": "小L",
"1": "小J",
}
}
}
}
</script>
<template>
<ul>
<li v-for="(value,key,index) in list">{{value}}</li>
</ul>
</template>
预期展示
小明
小L
小J
实际展示
小L
小J
小明
试了下原生的for in打印的顺序和上面试一样的。。。
所以我认为for in 遍历对象的实现应该是和 Object.keys有关的。
var list= {
"2": "小明",
"0": "小L",
"1": "小J",
}
Object.keys(list) // ["0", "1", "2"]
for in 先使用 Object.keys(list)获取对象的key数组。然后再暴露出来。。
vue 的源码是这样实现的
所以要是想保证你原本的顺序还是用 数组遍历吧,别遍历对象了