jQuery 함수 map()과 Each() 소개 및 유사점과 차이점 분석_jquery

메서드 구문: map()

맵(콜백)
콜백 함수는 래핑된 세트의 각 요소에 대해 호출되고 반환 값은 jQuery 객체의 인스턴스로 수집됩니다.
매개변수
callback (함수) 래핑된 세트의 각 요소에 대해 호출되는 콜백 함수입니다.
예를 들어 다음 코드는 페이지에 있는 모든 div 요소의 id 값을 자바스크립트 배열로 수집합니다.

코드 복사 코드는 다음과 같습니다.

var iDs = $("div").map(function(){
반환(this.id==undefine) ? null :this.id;
}).get();

아래 양식에 포함된 확인란 세트를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

<form method="post" action="">
<필드세트>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="text" value="8" id="eight" name="number[]">
</div>
</필드세트>
</양식>

쉼표로 구분된 체크박스 ID를 얻을 수 있습니다:

코드 복사 코드는 다음과 같습니다.

$(':checkbox').map(function() {
this.id를 반환하세요.
}).get().join();

이 호출의 결과는 "two,four,six" 문자열입니다.

콜백 함수에서 이는 각 반복의 현재 DOM 요소를 가리킵니다.

메서드 구문:each()

각(반복자)
일치하는 집합의 모든 요소를 ​​순회하고 각 요소에 대해 전달된 반복 함수
를 호출합니다. 일치하는 집합의 각 요소에 대해
이라는 반복자(함수) 콜백 함수 Each() 메소드는 JavaScript 배열 객체 또는 단일 객체를 순회하는 데에도 사용할 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

$([a,b,c,d]).each(함수(){
알림(이것);
})

이 문은 $()에 전달된 배열의 각 요소에 대해 반복 함수를 호출하며, 함수의 이 함수는 개별 배열 항목을 가리킵니다.

콜백 함수가 실행될 때마다 현재 루프 횟수가 매개변수로 전달됩니다(0부터 계산됩니다). 더 중요한 것은 콜백 함수가 현재 DOM 요소의 컨텍스트에서 트리거된다는 것입니다. 따라서 키워드 this는 항상 이 요소를 가리킵니다.

페이지에 이와 같이 순서가 지정되지 않은 간단한 목록이 있다고 가정해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

• foo


• 바

다음 목록을 선택하고 반복할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$( "li" ).each(function( 인덱스 ) {
console.log( index ": "" $(this).text() );
});

목록의 각 항목은 다음 메시지에 표시됩니다.

0: foo
1: 바
둘의 차이점

map() 메서드는 주로 연산 배열과 객체를 순회하는 데 사용되며, Each()는 주로 jquery 객체를 순회하는 데 사용됩니다.

each()는 원래 배열을 반환하고 새 배열을 생성하지 않습니다.
map() 메소드는 새로운 배열을 반환합니다. 맵을 불필요하게 사용하면 메모리가 낭비될 수 있습니다.