초기 값으로 JavaScript에서 배열을 채우는 방법

반복할 수 있도록 미리 정의된 값이 있는 배열을 갖고 싶은 경우가 있습니다. 가장 확실한 방법은 아래와 같이 for 루프를 만들고 배열을 초기화하는 것입니다.

let array = []

for (let index = 0; index < 10; index++) {
  array.push(1)
}

for 루프를 명시적으로 사용하지 않고 자바스크립트에서 배열을 채우는 3가지 다른 방법을 살펴보겠습니다.

Array.fill 메서드 사용

Array에서 제공하는 fill 방법을 사용할 수 있습니다.
미리 정의된 값으로 배열을 채우는 개체입니다.

const array = Array(10).fill(1)

console.log(array) // [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

Array(10)는 크기가 10인 빈(희소) 배열을 생성합니다.
fill 메서드는 배열의 일부만 채우는 데 사용할 수 있는 추가 매개 변수를 허용합니다.

const array = [1, 2, 3, 4]

array.fill(5, 2, 4)

console.log(array) //[1, 2, 5, 5]

두 번째 인수는 시작할 위치(포함)를 지정하는 데 사용되며 세 번째 인수는 채울 위치까지를 지정합니다(제외, 최대값은 array.length ).

Array.from 메서드 사용

Array.from 메서드를 사용하여 두 가지 방법으로 배열을 채울 수 있습니다.

const array1 = Array.from({ length: 10 }, () => 1)
console.log(array1) // [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

const array2 = Array.from(Array(10), () => 1)
console.log(array2) //[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

첫 번째 인수는 배열 또는 반복 가능한 객체를 허용하고 두 번째 인수는 채울 값을 반환해야 하는 맵 함수입니다.

스프레드 연산자 및 .map 함수 사용

확산 연산자와 map 함수의 조합을 사용하여 배열을 채울 수도 있습니다.

const array = [...Array(10)].map(() => 1)
console.log(array) //[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

Here spreading and creating another array is necessary since Array(10).map(()=>1) will only create an empty (sparse) array.

배열을 1..n으로 채우기

1에서 n까지의 숫자(예: 1에서 10)로 배열을 채워야 하는 경우 다음 코드 중 하나를 사용하여 수행할 수 있습니다.

const array1 = Array.from({ length: 10 }, (value, index) => index + 1)
console.log(array1) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const array2 = [...Array(10)].map((value, index) => index + 1)
console.log(array2) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

객체로 배열 채우기

숫자뿐만 아니라 문자열, 객체 등과 같은 다른 유형의 값으로 배열을 채울 수 있습니다. 객체 배열을 만들어야 하는 경우 아래와 같이 수행할 수 있습니다.

const array = Array.from({ length: 5 }, (value, index) => {
  return { id: index + 1 }
})
console.log(array) // [{"id":1},{"id":2},{"id":3},{"id":4},{"id":5}]

다른 방법을 알고 있다면 아래에 의견을 말하십시오.