保持填充 DOM 的顺序与对象顺序相同

Question

我有以这种格式排序的数据集

'10': '1',
'10-30': '0',
'11': '7',
'11-30': '0',
'12': '1'

现在我想根据从10到 ...12，但我不知道为什么12放在第二步。我的演示代码如下。为什么会这样？

var data = {
'10': '1',
'10-30': '0',
'11': '7',
'11-30': '0',
'12': '1'
};
for (var i = 0; i < Object.keys(data).length; i++) {
$('.btn-group').append("<button class='btn btn-secondary'>" + Object.keys(data)[i] + "</button>");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" role="group" aria-label="Basic example">
</div>

Answer 1

Gerardo提到的问题将解释发生这种情况的原因。但是，如果您正在寻找一种方法将它们放回原位，请使用sort().

var data = {
'10': '1',
'10-30': '0',
'11': '7',
'11-30': '0',
'12': '1'
};
var sorted = Object.keys(data).sort();
for (var i = 0; i < sorted.length; i++) {
$('.btn-group').append("<button class='btn btn-secondary'>" + sorted[i] + "</button>");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="btn-group" role="group" aria-label="Basic example">
</div>