JavaScript의 forEach, $.each 및 map 메소드에 대한 자세한 설명

이전 글에서는 php의 foreach 문에 대한 자세한 설명과 foreach 및 Each 사용법에 대한 소개를 소개해드렸으니, 오늘은 orEach, $.each, JS의 지도 메소드!

forEach는 순회 및 반복인 ECMA5의 새로운 Array 메서드 중 가장 기본적인 메서드입니다. 예를 들어

[1, 2 ,3, 4].forEach(alert);

는 다음 for loop

var array = [1, 2, 3, 4];
for (var k = 0, length = array.length; k < length; k++) {
 alert(array[k]);
}

Array와 동일합니다. ES5의 새로운 메서드에서 매개변수는 모두 함수 유형이며 매개변수는 기본적으로 함수 콜백으로 전달됩니다. forEach 메소드는 3개의 매개변수를 지원합니다. 첫 번째는 순회된 배열 내용이고, 두 번째는 해당 배열 인덱스이고, 세 번째는 배열 자체입니다.

그래서 다음과 같습니다:

[].forEach(function(value, index, array) {
  // ...
});

jQuery의 $.each 메소드를 비교해 보세요.

$.each([], function(index, value, array) {
  // ...
});

첫 번째 매개변수와 두 번째 매개변수가 정확히 반대라는 것을 알 수 있습니다. 모두가 주의해야 하며 기억하지 마세요. 잘못된. . $.map과 같은 유사한 메소드의 경우에도 마찬가지입니다.

var data=[1,3,4] ; 
var sum=0 ;
data.forEach(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  sum+=val            
})
console.log(sum);          // ==> 8

map

여기서 지도는 '지도'가 아니라 '매핑'을 의미합니다. [].map(); 기본 사용법은 forEach 메소드와 유사합니다:

array.map(callback,[ thisObject]);

콜백의 매개변수도 유사합니다:

[].map(function(value, index, array) {
  // ...
});

map 메소드의 기능은 이해하기 어렵지 않습니다. 즉, 원래 배열이 해당 새 배열에 "매핑"됩니다. 다음 예는 숫자 항목의 제곱을 찾는 것입니다.

var data=[1,3,4]

var Squares=data.map(function(val,index,arr){
  console.log(arr[index]==val);  // ==> true
  return val*val           
})
console.log(Squares);        // ==> [1, 9, 16]

참고: forEach와 map은 ECMA5의 새로운 배열 방법이므로 ie9 이하의 브라우저는 아직 이를 지원하지 않습니다(최악의 IE). 그러나 Array 프로토타입을 사용할 수 있습니다. 확장 프로그램은 forEach 메소드와 같은 위의 모든 기능을 실현할 수 있습니다:

if (typeof Array.prototype.forEach != "function") {
  Array.prototype.forEach = function() {
    /* 实现 */
  };
}

요약:

이 글에서는 JavaScript의 forEach, $.each 및 map 메소드를 자세히 소개합니다. , 필요에 따라 선택할 수 있습니다!
관련 권장 사항:

JS

JS

의 Foreach 구문에 대한 자세한 설명

사용 예 자바스크립트의 FOREACH 배열 메소드

위 내용은 JavaScript의 forEach, $.each 및 map 메소드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!