>  기사  >  웹 프론트엔드  >  JS의 forEach, $.each 및 map 메소드 소개

JS의 forEach, $.each 및 map 메소드 소개

零下一度
零下一度원래의
2017-06-28 14:50:141398검색

아래 편집기는 JS의 forEach, $.each 및 map 메소드에 대한 권장 사항을 제공합니다. 편집자님이 꽤 좋다고 하셔서 지금 공유하고 모두에게 참고가 되었으면 좋겠습니다. 편집기를 따라가서 살펴보겠습니다.

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

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

는 다음 for 루프

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                                                           map ”은 “매핑”을 의미합니다. [].map(); 기본 사용법은 forEach 메소드와 유사합니다:

array.map(callback,[ thisObject]);

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

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

// ...

});


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

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) // ==>

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

if (typeof Array.prototype.forEach != "함수") {

Array.prototype.forEach = function() {

/* 구현*/

};

}

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.