TypeScript에서 객체 배열 반복

1. TypeScript의 배열
2. TypeScript에서 forEach 메서드를 사용하여 객체 배열을 반복합니다.
3. TypeScript에서 for...of 문을 사용하여 객체 배열을 반복합니다.
4. TypeScript에서 for...in 문을 사용하여 객체 배열을 반복합니다.
5. TypeScript에서 for 루프를 사용하여 객체 배열을 반복합니다.

이 기사에서는 TypeScript에서 객체 배열을 반복하는 방법을 설명합니다.

TypeScript의 배열

TypeScript 배열은 사용자 정의입니다. 문자열, 숫자 등과 같은 다양한 데이터 유형의 여러 값을 저장할 수 있는 특수 데이터 유형입니다.

배열은 고정 크기 데이터 구조입니다. 요소 배열은 인덱스 기반 저장소에 저장됩니다.

첫 번째 요소는 인덱스 0에 저장되고 추가된 각 요소에 대해 1씩 증가합니다.

TypeScript는 다음 구문을 사용하여 배열을 선언하고 초기화합니다.

let carBrands: string[] = ["Audi", "BMW", "Toyota", "Mercedes"];

배열 요소에 액세스

요소의 배열은 요소의 인덱스를 사용하여 아래와 같이 액세스할 수 있습니다.

예제 코드:

console.log(carBrands[0]);
console.log(carBrands[1]);
console.log(carBrands[2]);
console.log(carBrands[3]);

출력:

Audi
BMW
Toyota
Mercedes

TypeScript에서 요소 배열을 반복하는 방법에는 여러 가지가 있습니다.

1. forEach 방법
2. for 루프
3. for...of 문
4. for...in 문

TypeScript에서 forEach 메서드를 사용하여 객체 배열을 반복합니다.

이 메소드는 TypeScript 배열의 각 요소 또는 객체에 대해 함수를 실행합니다. forEach 메서드는 다음과 같이 선언할 수 있습니다.

통사론:

your_array.forEach(callback function);

문자열 배열을 선언해 봅시다.

let carBrands: string[] = ["Audi", "BMW", "Toyota", "Mercedes"];

forEach 메소드를 사용하여 carBrands의 모든 배열 요소를 다른 배열로 복사합니다. copyOfCarBrands라는 빈 배열을 선언해 보겠습니다.

let copyOfCarBrands: string[] = [];

forEach 메서드를 사용하여 carBrands 배열의 각 요소를 반복하고 새 copyOfCarBrands 배열로 푸시합니다.

carBrands.forEach(function(brand){
    copyOfCarBrands.push(brand);
});

마지막으로 copyOfCarBrands 배열을 인쇄해 보겠습니다.

console.log(copyOfCarBrands);

출력:

[ 'Audi', 'BMW', 'Toyota', 'Mercedes' ]

다중 유형 배열에도 forEach 메서드를 사용할 수 있습니다. multiValues라는 다중 유형 배열을 정의하고 각 항목을 콘솔에 기록해 보겠습니다.

let multiValues: (string | number)[] = ['Asia', 1000, 'Europe', 340, 20];
multiValues.forEach(function(value){
    console.log(value);
});

출력:

Asia
1000
Europe
340
20

forEach 방법에는 몇 가지 단점이 있습니다.

1. 이 방법은 배열에만 사용할 수 있습니다.
2. 루프를 끊을 방법이 없습니다.

TypeScript에서 for...of 문을 사용하여 객체 배열을 반복합니다.

for...of 루프 문은 배열의 요소에 액세스하여 반환할 수 있습니다. 아래와 같이 사용할 수 있습니다.

통사론:

for (let variable of givenArray ) {
    statement;
}

각 반복에서 variable은 givenArray의 배열 요소에 할당됩니다.

배열을 선언해 봅시다.

let fruits: string[] = ["Apple", "Grapes", "Mangoe", "Banana"];

아래에서 for...of 루프를 사용하여 fruits 배열의 각 요소에 액세스할 수 있습니다.

for (let fruitElement of fruits) {
  console.log(fruitElement);
}

출력:

Apple
Grapes
Mangoe
Banana

TypeScript에서 for...in 문을 사용하여 객체 배열을 반복합니다.

for...in 루프 구문은 for...of와 거의 유사합니다. 그러나 각 반복에서 배열 요소의 인덱스를 반환합니다.

이 루프는 다음과 같이 사용할 수 있습니다.

통사론:

for (let variable in givenArray ) {
    statement;
}

변수는 각 반복에서 각 요소의 인덱스에 할당됩니다. givenArray는 반복 가능한 배열입니다.

숫자 배열을 정의해 봅시다.

let numberArr: number[] = [100,560,300,20];

반환된 인덱스 값을 사용하여 numberArr의 각 요소에 액세스할 수 있습니다.

for (let variable in numberArr ) {
    console.log(numberArr[variable]);
}

각 반복에서 변수는 numberArr의 각 요소 인덱스에 할당됩니다. 따라서 numberArr[index]로 요소 값에 액세스할 수 있습니다.

이 경우 인덱스 값은 각 반복에서 변수가 됩니다.

출력:

100
560
300
20

TypeScript에서 for 루프를 사용하여 객체 배열을 반복합니다.

for 루프는 배열 요소를 반복하는 가장 일반적인 방법입니다. 아래와 같이 사용할 수 있습니다.

통사론:

for (let index; index<arraySize; index++) {
    statement;
}

index 값은 반복할 때마다 증가하고 index < arraySize 조건이 충족될 때까지 루프가 계속됩니다.

문자열 배열을 만들어 봅시다.

let oceanArr: string[] = ['Atlantic', 'Indian', 'Pacific'];

oceanArr의 각 요소를 반복하고 아래와 같이 인쇄할 수 있습니다.

for (let index=0; index<oceanArr.length; index++) {
    console.log(oceanArr[index]);
}

출력:

Atlantic
Indian
Pacific