JavaScript로 배열에 연상 배열을 추가하려고 했지만 뜻대로 되지 않아 5시간 동안 녹았어요...VScode 디버그 데뷔

16191 단어 초학자 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의 규격이요!?
거기서 안정적이고 신뢰하는 파이썬 선배님이 등장하셨습니다.

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의 디버깅 기능을 사용해 보았다.

네 번째 줄의member가 업데이트되었을 때 사전의 데이터 내의 값도 업데이트된 것 같습니다.법망͡° ͜ ʖ ͡° )

해결책

뒤에서 사전을 펑펑 추가하는 것이 아니라 배열에서 사전을 미리 만들어 업데이트하는 것이다.

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 }
]

Reference

이 문제에 관하여(JavaScript로 배열에 연상 배열을 추가하려고 했지만 뜻대로 되지 않아 5시간 동안 녹았어요...VScode 디버그 데뷔), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/dorayaki_san/articles/37e55215f38bb3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

클라우드 9로 Haskell 환경 구축

조회where절에서 표기법 주의~NSPredicate 주의~[RealmSwift]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다