這個迴圈可能跟你想的不一樣

這篇的標題實在命名障礙。

簡述

直接來看段例子：

const obj = {}
const array = [5, 4, 3, 2 ,1];

for (const item of array) {
  obj[item] = `this is ${item}`;
}
console.log(obj);

你覺得答案會是哪個？

// 第一種
{
  '1': 'this is 1',
  '2': 'this is 2',
  '3': 'this is 3',
  '4': 'this is 4',
  '5': 'this is 5'
}
// 第二種
{
  '5': 'this is 5'
  '4': 'this is 4',
  '3': 'this is 3',
  '2': 'this is 2',
  '1': 'this is 1',
}

我知道！迴圈是按照 5 4 3 2 1 來跑的，所以是「第二種」！

這也是我原本的想法，不過正確答案是「第一種」。

你可能會想說「那應該是因為 array 存的是數字的關係吧？」

好，那我們來試試看存成字串是不是就和我們想的一樣了？

const obj = {}
const array = ['5', '4', '3', '2' ,'1'];

for (const item of array) {
  obj[item] = `this is ${item}`;
}
console.log(obj);

直接拿到 console 跑，你會發現結果一樣，而且還被轉成數字了：

好，說到這裡其實只是想講清楚兩件事：

1. Object 的 key 如果是數字，那會「由大到小」來排，而不是你「放進去的順序」
2. 如果你存的「字串」長的太像數字（上面的例子），就會被轉成「數字」

還是不懂的話這再舉最後一個例子給你參考：

const obj2 = {
  '100': 'yo',
  '50': 'yo',
  '10': 'yo'
}
console.log(obj2); // {10: 'yo', 50: 'yo', 100: 'yo'}

可是我如果就是想用數字的形式來儲存 key 的話怎麼辦？記得剛剛說的嗎，我說如果你存的字串太像數字的話才會被轉成數字。

所以反其道而行，不要讓它看起來那麼像數字就好了：

附註：實際案例可以參考 JavaScript 整理資料的範例

const obj2 = {
  ' 100': 'yo',
  ' 50': 'yo',
  ' 10': 'yo'
}
console.log(obj2);

沒錯，就是加上一個「空格」。這樣就不會被當成數字了，順序也會依照你所想的來排。