소개

배열로 작업할 때 Array.from 와 Array.fill 의 차이에 항상 주의해야 합니다.

Array.fill

훨씬 더 간단한 구문을 가지고 있기 때문에 매우 유혹적입니다Array.fill. 그러나 다차원 배열에 관해서는 불쾌한 작은 짐승입니다.

Array.fill actually references the same object in memory.

이것은 무엇을 의미 하는가?

5*5 다차원 배열을 만들 수 있습니다. 이것은 셀 시스템을 기반으로 비디오 게임을 생성하는 데 사용할 수 있습니다.

let test = new Array(5).fill(new Array(5).fill("1"))
console.log(test)

이것은 우리에게 다음과 같은 출력을 제공합니다:

[
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ]
]

하나의 셀만 수정하려고 할 때까지는 모든 것이 꽤 괜찮아 보입니다.

test[0][1] = "5"
console.log(test)

이것은 우리에게 다음과 같은 출력을 제공합니다:

[
[ '1', '5', '1', '1', '1' ],
[ '1', '5', '1', '1', '1' ],
[ '1', '5', '1', '1', '1' ],
[ '1', '5', '1', '1', '1' ],
[ '1', '5', '1', '1', '1' ]
]

무엇을 기다립니다???

메모리에서 동일한 개체를 참조한다는 것은 하나의 열을 변경할 때 한 열의 모든 셀이 변경된다는 것을 의미합니다!

Array.from 구조

Array.from 더 반복적인 접근 방식을 사용하고 동일한 객체를 참조하지 않습니다. 이는 우리가 무엇이든 수정할 수 있음을 의미합니다.

let fixed = Array.from({length: 5}, () => (
    Array.from({length: 5}, () => ("1"))
))
console.log(fixed)

이것은 우리에게 다음과 같은 출력을 제공합니다:

[
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ]
]

지금은 똑같아 보이지만 셀을 수정하려고 하면:

fixed[0][1] = "5"
console.log(fixed)

다음 출력을 얻습니다.

[
  [ '1', '5', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ],
  [ '1', '1', '1', '1', '1' ]
]

우훗

이제 실제 다차원 배열을 만들 수 있습니다.


벌렛 메데릭
https://medericburlet.com
https://mederic.me