각 인덱스에 대한 JavaScript

1. JavaScript forEach() 색인
2. forEach() 콜백 함수의 인수 및 매개변수
3. forEach()를 사용하여 주어진 배열에서 홀수 및 짝수 값 인쇄
4. forEach()를 사용하여 루프 중단/계속 또는 종료
5. 결론

배열의 반복에 사용되는 JavaScript의 메서드 중 forEach()가 가장 일반적으로 사용됩니다.

JavaScript forEach() 색인

배열은 인덱스로 지정된 개체 아래에 저장된 값의 정렬된 목록입니다. forEach()는 index[0]에서 index[1], index[2] 등으로 시작하여 배열의 인덱스 값을 반복합니다.

forEach()는 배열의 각 요소에 대한 함수를 호출하고 연결이 불가능하기 때문에 새 배열을 반환하는 대신 undefined를 반환합니다. 그러나 삭제되거나 초기화되지 않은 빈 요소 및 인덱스에 대해서는 실행되지 않습니다.

콜백 함수가 있는 뮤테이터 메서드가 아님에도 불구하고 forEach()는 원래 배열을 변경합니다. forEach() 메서드가 인덱스 오름차순으로 한 번에 한 요소씩 배열을 순회하는 것을 콜백 함수라고 합니다.

forEach() 및 콜백 함수 작동 방식

처음에는 콜백 함수를 호출하기 전에 forEach()가 배열 요소의 범위를 처리합니다. 그런 다음 콜백 함수는 이미 호출된 인덱스 또는 범위를 벗어난 인덱스 이외의 다른 인덱스를 방문합니다.

루핑 시 기존 요소가 변경되거나 삭제되면 이전에 forEach() 함수에 전달된 값이 기본값이 됩니다. 그러나 콜백 함수는 반복 중에 제거되거나 수정된 요소를 건너뜁니다.

forEach() 콜백 함수의 인수 및 매개변수

forEach() 콜백 함수의 표준화된 메서드는 두 개의 인수로 구성됩니다.

array.forEach(function(currentValue, index, array), thisArg)

여기서 함수는 값을 호출하는 데 사용하는 함수입니다. 모든 요소를 실행할 때 콜백 함수를 function으로 사용합니다.

콜백 함수에는 아래에 정의된 세 가지 매개변수가 포함됩니다.

1. currentValue – 배열의 현재 요소(루프 시간).
2. index – 인덱스는 currentValue의 인덱스를 포함합니다.
3. 배열 – 현재 처리 요소가 속한 배열입니다.

thisArg는 단순히 this에 전달된 값입니다. 또한 callback에서 사용되는 이 값을 가리킵니다.

원하는 경우 index, array 및 thisArg를 이 표준화된 방법에 사용할 수 있습니다. function 및 currentValue만 필요합니다.

예제를 통해 이를 명확히 합시다. 여기에서는 알파벳에 임의의 문자를 할당하여 이름이 지정된 문자 배열을 사용했습니다.

var letters = ['b', 'e', 'f', 'j', 'u'];

currentValue 매개변수 사용

암호:

letters.forEach(function callback(letters) {
  console.log(letters);
});

출력:

배열의 모든 문자를 개별적으로 나타내려면 currentValue와 함께 forEach()를 사용할 수 있습니다. 여기서는 문자 배열을 currentValue로 사용했습니다.

배열 내의 모든 단일 요소를 수행하므로 함수를 실행할 때 하나 이상의 매개 변수를 사용하는 것이 필수입니다. 위의 코드를 단순화하기 위해 아래와 같이 화살표 함수 표현을 사용할 수 있습니다.

암호:

letters.forEach(letters => console.log(letters))

출력:

인덱스 매개변수 사용

배열에 있는 각 요소의 인덱스를 가져오려면 아래 표시된 index 매개 변수를 추가하여 코드를 확장할 수 있습니다.

암호:

letters.forEach((letters, index) => {
  console.log('Index of ' + letters + ' is ' + index);
});

출력:

여기서 코드는 해당 인덱스와 함께 요소의 값을 하나씩 표시합니다.

배열 매개변수 사용

콜백 함수와 함께 사용하는 또 다른 선택적 매개변수는 array입니다. 이 매개 변수 배열을 사용하여 아래와 같이 배열을 별도로 인쇄할 수 있습니다.

암호:

letters.forEach((letters, index, array) => {console.log(array)})

출력:

이 코드 청크는 포함된 반복 및 인덱스와 유사한 유형의 원래 배열을 인쇄합니다. 위의 프로세스에 적응함으로써 사용 사례에 따라 index 및 array 매개변수와 함께 forEach() 함수를 구현할 수 있습니다.

지금까지 콜백 함수의 인자와 매개변수에 대해 따로 설명했습니다. 다음은 forEach() 콜백 함수를 사용하는 또 다른 예입니다.

forEach()를 사용하여 주어진 배열에서 홀수 및 짝수 값 인쇄

암호:

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach(function(currentValue, index, array) {
  if (currentValue % 2) {
    console.log(' ' + currentValue + ' is an odd number.');
  } else {
    console.log(' ' + currentValue + ' is an even number.');
  }
});

출력:

여기서 숫자 배열은 일상 생활에서 사용하는 임의의 숫자로 구성됩니다. currentValue, index, array 및 if 조건문과 함께 forEach() 함수를 사용하여 숫자가 홀수인지 아닌지를 출력했습니다.

각 반복 후 if 조건문에 따라 값을 출력으로 인쇄합니다.

forEach()를 사용하여 루프 중단/계속 또는 종료

반복하는 동안 break 또는 continue를 사용하는 것은 조건이 충족되면 어레이를 종료하는 한 가지 방법입니다. 다른 루프와 마찬가지로 break 및 continue를 forEach()에 적용해 보겠습니다.

break 사용:

암호:

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach((numbers) => {
  if (numbers == 9) break;

출력:

계속 사용:

암호:

var numbers = [15, 10, 9, 11, 16, 5];
numbers.forEach((numbers) => {
  if (numbers == 9) continue;
  console.log(numbers);
});

출력:

두 코드 스니펫의 출력에서와 같이 forEach() 메소드를 사용하면 루프 내부에서 예외를 발생시키지 않고 forEach()를 사용하는 루프에 대해 break 또는 continue를 사용하거나 종료할 수 없게 됩니다. 콜백 함수. 따라서 forEach()는 break 또는 continue 키워드와 함께 지원되지 않습니다.

결론

forEach() 함수는 코드의 재사용성과 가독성을 고려하여 for 루프의 대안이 됩니다.

암호:

var letters = ['b', 'e', 'f', 'j', 'u'];

//using for() loop
Console.log(“From For Loop”)
for(var i=0; i< letters.length; i++){
    console.log(letters [i]);
}

//using forEach() function
console.log("From ForEach() function")
letters.forEach(function(currentValue){
    console.log(currentValue);
});

출력:

전반적으로 ES5의 다른 기능 중에서 forEach()는 최대로 최고의 기능 호환성 중 하나입니다.