Zenn
😭

JavaScriptで配列に連想配列追加したいのに思うようにいかず5時間溶かした...VScodeデバッグデビュー

2022/04/08に公開
初心者
tech

コード

let data = [];
let member = {};
for(let i=0;i<100;i++){

    member[i%5] = i;

    if(i%5===0){
        data.push(member);
        console.log(member);
    }
}
console.log("出力結果");
console.log(data);

理想

[{ '0': 0 },
{ '0': 5, '1': 1, '2': 2, '3': 3, '4': 4 },     
{ '0': 10, '1': 6, '2': 7, '3': 8, '4': 9 },    
{ '0': 15, '1': 11, '2': 12, '3': 13, '4': 14 },
{ '0': 20, '1': 16, '2': 17, '3': 18, '4': 19 },
{ '0': 25, '1': 21, '2': 22, '3': 23, '4': 24 },
{ '0': 30, '1': 26, '2': 27, '3': 28, '4': 29 },
{ '0': 35, '1': 31, '2': 32, '3': 33, '4': 34 },
{ '0': 40, '1': 36, '2': 37, '3': 38, '4': 39 },
{ '0': 50, '1': 46, '2': 47, '3': 48, '4': 49 },
{ '0': 55, '1': 51, '2': 52, '3': 53, '4': 54 },
{ '0': 60, '1': 56, '2': 57, '3': 58, '4': 59 },
{ '0': 65, '1': 61, '2': 62, '3': 63, '4': 64 },
{ '0': 70, '1': 66, '2': 67, '3': 68, '4': 69 },
{ '0': 75, '1': 71, '2': 72, '3': 73, '4': 74 },
{ '0': 80, '1': 76, '2': 77, '3': 78, '4': 79 },
{ '0': 85, '1': 81, '2': 82, '3': 83, '4': 84 },
{ '0': 90, '1': 86, '2': 87, '3': 88, '4': 89 },
{ '0': 95, '1': 91, '2': 92, '3': 93, '4': 94 }]

現実

{ '0': 0 }
{ '0': 5, '1': 1, '2': 2, '3': 3, '4': 4 }
{ '0': 10, '1': 6, '2': 7, '3': 8, '4': 9 }
{ '0': 15, '1': 11, '2': 12, '3': 13, '4': 14 }
{ '0': 20, '1': 16, '2': 17, '3': 18, '4': 19 }
{ '0': 25, '1': 21, '2': 22, '3': 23, '4': 24 }
{ '0': 30, '1': 26, '2': 27, '3': 28, '4': 29 }
{ '0': 35, '1': 31, '2': 32, '3': 33, '4': 34 }
{ '0': 40, '1': 36, '2': 37, '3': 38, '4': 39 }
{ '0': 50, '1': 46, '2': 47, '3': 48, '4': 49 }
{ '0': 55, '1': 51, '2': 52, '3': 53, '4': 54 }
{ '0': 60, '1': 56, '2': 57, '3': 58, '4': 59 }
{ '0': 65, '1': 61, '2': 62, '3': 63, '4': 64 }
{ '0': 70, '1': 66, '2': 67, '3': 68, '4': 69 }
{ '0': 75, '1': 71, '2': 72, '3': 73, '4': 74 }
{ '0': 80, '1': 76, '2': 77, '3': 78, '4': 79 }
{ '0': 85, '1': 81, '2': 82, '3': 83, '4': 84 }
{ '0': 90, '1': 86, '2': 87, '3': 88, '4': 89 }
{ '0': 95, '1': 91, '2': 92, '3': 93, '4': 94 }
出力結果
[
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 }
]

なんで最後の連想配列が繰り返されるんじゃ...jsの仕様か！？
そこで安定と信頼のpython先輩登場

data = []
member = {}
for i in range(100):
    member[i%5] = i

    if(i%5==0):
        data.append(member)
        print(data)
        print(member)
print("出力結果")
print(data)

結果

{0: 0}
{0: 5, 1: 1, 2: 2, 3: 3, 4: 4}
{0: 10, 1: 6, 2: 7, 3: 8, 4: 9}
{0: 15, 1: 11, 2: 12, 3: 13, 4: 14}
{0: 20, 1: 16, 2: 17, 3: 18, 4: 19}
{0: 25, 1: 21, 2: 22, 3: 23, 4: 24}
{0: 30, 1: 26, 2: 27, 3: 28, 4: 29}
{0: 35, 1: 31, 2: 32, 3: 33, 4: 34}
{0: 40, 1: 36, 2: 37, 3: 38, 4: 39}
{0: 45, 1: 41, 2: 42, 3: 43, 4: 44}
{0: 50, 1: 46, 2: 47, 3: 48, 4: 49}
{0: 55, 1: 51, 2: 52, 3: 53, 4: 54}
{0: 60, 1: 56, 2: 57, 3: 58, 4: 59}
{0: 65, 1: 61, 2: 62, 3: 63, 4: 64}
{0: 70, 1: 66, 2: 67, 3: 68, 4: 69}
{0: 75, 1: 71, 2: 72, 3: 73, 4: 74}
{0: 80, 1: 76, 2: 77, 3: 78, 4: 79}
{0: 85, 1: 81, 2: 82, 3: 83, 4: 84}
{0: 90, 1: 86, 2: 87, 3: 88, 4: 89}
{0: 95, 1: 91, 2: 92, 3: 93, 4: 94}
出力結果
[{0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}, {0: 95, 1: 96, 2: 97, 3: 98, 4: 99}]

😇😇😇😇😇
ハイ、わたくしが間違っておりました。

人生初のVScodeのデバッグ機能使ってみた。

4行目のmemberの更新の際に、辞書のdata内の値も更新されてるぽい。ほう͡° ͜ ʖ ͡° )

解決策

後から配列に辞書をポンポン追加するのではなく、配列にあらかじめ辞書を作り、その中を更新するようにした。

let data = [];
for(let i=0;i<100;i++){
    if(i%5===0){
        data[i/5] = {};
        data[i/5]['0'] = i; 
    }
    else{
        data[Math.floor(i/5)][i%5] = i;

    }
}
console.log("出力結果");
console.log(data);

結果

出力結果
[
  { '0': 0, '1': 1, '2': 2, '3': 3, '4': 4 },
  { '0': 5, '1': 6, '2': 7, '3': 8, '4': 9 },
  { '0': 10, '1': 11, '2': 12, '3': 13, '4': 14 },
  { '0': 15, '1': 16, '2': 17, '3': 18, '4': 19 },
  { '0': 20, '1': 21, '2': 22, '3': 23, '4': 24 },
  { '0': 25, '1': 26, '2': 27, '3': 28, '4': 29 },
  { '0': 30, '1': 31, '2': 32, '3': 33, '4': 34 },
  { '0': 35, '1': 36, '2': 37, '3': 38, '4': 39 },
  { '0': 40, '1': 41, '2': 42, '3': 43, '4': 44 },
  { '0': 45, '1': 46, '2': 47, '3': 48, '4': 49 },
  { '0': 50, '1': 51, '2': 52, '3': 53, '4': 54 },
  { '0': 55, '1': 56, '2': 57, '3': 58, '4': 59 },
  { '0': 60, '1': 61, '2': 62, '3': 63, '4': 64 },
  { '0': 65, '1': 66, '2': 67, '3': 68, '4': 69 },
  { '0': 70, '1': 71, '2': 72, '3': 73, '4': 74 },
  { '0': 75, '1': 76, '2': 77, '3': 78, '4': 79 },
  { '0': 80, '1': 81, '2': 82, '3': 83, '4': 84 },
  { '0': 85, '1': 86, '2': 87, '3': 88, '4': 89 },
  { '0': 90, '1': 91, '2': 92, '3': 93, '4': 94 },
  { '0': 95, '1': 96, '2': 97, '3': 98, '4': 99 }
]

Discussion