es6에서 foreach() 메서드는 배열을 순회하고, 배열의 각 요소를 호출하고, 처리를 위해 요소를 콜백 함수에 전달하는 데 사용됩니다. 구문은 "array.forEach(function(currentValue,index,arr) ),이값)" .
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
es6에서는 foreach() 메서드를 사용하여 배열을 반복하고, 배열의 각 요소를 호출하고, 처리를 위해 요소를 콜백 함수에 전달합니다. 구체적인 설명은 다음과 같습니다.
array.forEach(function(currentValue, index, arr), thisValue)
Parameter | Description |
---|---|
function(currentValue, index, arr) | 필수입니다. 배열의 각 요소에 대해 호출해야 하는 함수입니다. 함수 매개변수: 매개변수 설명 currentValue가 필요합니다. 현재 요소 인덱스는 선택 사항입니다. 현재 요소의 인덱스 값입니다. arr은 선택 사항입니다. 현재 요소가 속한 배열 개체입니다. |
thisValue | 선택사항. 함수에 전달되는 값은 일반적으로 "this" 값을 사용합니다. 이 매개변수가 비어 있으면 "정의되지 않음"이 "this" 값으로 전달됩니다. |
배열에 나타나는 각 요소에 대해 forEach 메서드는 오름차순 인덱스 순서로 callbackfn 함수를 한 번 호출하지만 호출하지는 않습니다. 빈 배열의 경우 요소가 콜백 함수를 호출합니다.
배열 객체 외에도 forEach 메서드는 연관 배열 객체, 인수 등과 같이 길이 속성이 있고 숫자로 인덱스된 속성 이름이 있는 모든 객체에 사용할 수 있습니다.
forEach 메서드는 원본 배열을 직접 수정하지 않지만 콜백 함수가 이를 수정할 수 있습니다. forEach 메소드가 시작된 후 배열 객체를 수정한 결과는 표와 같다.
forEach 메서드가 시작된 후의 조건 | 요소가 콜백 함수에 전달되는지 여부 |
---|---|
배열의 원래 길이를 초과하는 요소 추가 | 아니요 |
요소를 추가하여 배열에서 누락된 요소 채우기 | 예, 인덱스가 콜백 함수에 전달되지 않은 경우 |
요소가 변경되었습니다. | 예, 요소가 콜백 함수에 전달되지 않은 경우 콜백 함수 |
배열에서 요소 제거 | 아니요, 요소가 콜백 함수에 전달되지 않은 경우 |
예제 1
다음 예에서는 forEach를 사용하여 배열 a를 반복한 다음 표시할 각 요소의 값과 첨자 인덱스를 출력합니다.
function f(value,index,array) { console.log("a[" + index + "] = " + value); } var a = ['a', 'b', 'c']; a.forEach(f);
시연 결과는 다음과 같습니다.
예제 2
다음 예에서는 forEach를 사용하여 배열 a를 반복합니다. 그런 다음 배열 요소의 합을 계산하여 출력합니다.
var a = [10, 11, 12], sum = 0; a.forEach (function (value) { sum += value; }); console.log(sum); //返回33
예제 3
다음 예에서는 콜백 함수의 this 전달된 개체인 forEach() 메서드의 두 번째 매개 변수를 사용하는 방법을 보여줍니다. 배열을 반복할 때 배열 요소의 값을 먼저 읽은 다음 해당 값을 덮어씁니다.
var obj = { f1 : function(value,index,array) { console.log("a[" + index + "] = " + value); arrar[index] = this.f2(value); }, f2 : function (x) {return x * x;} }; var a = [12, 26, 36]; a.forEach(obj.f1, obj); console.log(a); //返回[144, 676, 1296]
【관련 추천: javascript 비디오 튜토리얼, web front-end】
위 내용은 es6에서 foreach()를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!