JavaScriptで配列に連想配列追加したいのに思うようにいかず5時間溶かした...VScodeデバッグデビュー
コード
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 }
]
Author And Source
この問題について(JavaScriptで配列に連想配列追加したいのに思うようにいかず5時間溶かした...VScodeデバッグデビュー), 我々は、より多くの情報をここで見つけました https://zenn.dev/dorayaki_san/articles/37e55215f38bb3著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol