jQuery 맵과 각각

jQuery에서 map와 each함수는 같은 일을하는 것 같습니다. 둘 사이에 실질적인 차이가 있습니까? 언제 다른 것을 사용하지 않습니까?

이 each메소드는 불변의 반복자입니다. 이 메소드는 반복자 map로 사용할 수 있지만 실제로는 제공된 배열을 조작하고 새 배열을 리턴합니다.

주목해야 할 또 다른 중요한 사항은 each함수가 원래 배열을 map반환 하고 함수는 새 배열을 반환한다는 것입니다. 맵 함수의 반환 값을 과도하게 사용하면 많은 메모리를 낭비 할 수 있습니다.

예를 들면 다음과 같습니다.

var items = [1,2,3,4];

$.each(items, function() {
  alert('this is ' + this);
});

var newItems = $.map(items, function(i) {
  return i + 1;
});
// newItems is [2,3,4,5]

map 함수를 사용하여 배열에서 항목을 제거 할 수도 있습니다. 예를 들면 다음과 같습니다.

var items = [0,1,2,3,4,5,6,7,8,9];

var itemsLessThanEqualFive = $.map(items, function(i) {
  // removes all items > 5
  if (i > 5) 
    return null;
  return i;
});
// itemsLessThanEqualFive = [0,1,2,3,4,5]

또한 함수 this에서이 매핑되지 않았습니다 map. 콜백에서 첫 번째 매개 변수를 제공해야합니다 (예 : i위에서 사용한 ). 아이러니하게도, 각 메소드에 사용 된 콜백 인수는 map 함수의 콜백 인수와 반대이므로주의하십시오.

map(arr, function(elem, index) {});
// versus 
each(arr, function(index, elem) {});

1 : 콜백 함수에 대한 인수가 반대입니다.

.each()집, $.each()집과 .map()의 콜백 함수 소자 먼저 인덱스를 수행하고,

function (index, element) 

$.map()의 콜백은 동일한 인수를 갖지만 반대

function (element, index)

2 : .each(),, $.each()그리고 .map()뭔가 특별한 일을this

each()this현재 요소 를 가리키는 방식으로 함수를 호출합니다 . 대부분의 경우 콜백 함수에 두 개의 인수가 필요하지 않습니다.

function shout() { alert(this + '!') }

result = $.each(['lions', 'tigers', 'bears'], shout)

// result == ['lions', 'tigers', 'bears']

들어 변수 글로벌 윈도우 객체를 참조합니다.$.map()this

3 : map()콜백의 반환 값에 특별한 일을합니다.

map()각 요소에서 함수를 호출하고 결과를 새 배열에 저장하여 반환합니다. 일반적으로 콜백 함수에서 첫 번째 인수 만 사용하면됩니다.

function shout(el) { return el + '!' }

result = $.map(['lions', 'tigers', 'bears'], shout)

// result == ['lions!', 'tigers!', 'bears!']

이 each함수는 배열을 반복하면서 요소 당 한 번 제공된 함수를 호출 this하고 활성 요소로 설정 합니다. 이:

function countdown() {
    alert(this + "..");
}

$([5, 4, 3, 2, 1]).each(countdown);

경고합니다 5..다음 4..다음 3..다음 2..다음1..

반면에 Map은 배열을 가져오고 함수에 의해 각 요소가 변경된 새 배열을 반환합니다. 이:

function squared() {
    return this * this;
}

var s = $([5, 4, 3, 2, 1]).map(squared);

의 결과로 나타납니다 [25, 16, 9, 4, 1].

나는 이것으로 그것을 이해했다 :

function fun1() {
    return this + 1;
}
function fun2(el) {
    return el + 1;
}

var item = [5,4,3,2,1];

var newitem1 = $.each(item, fun1);
var newitem2 = $.map(item, fun2);

console.log(newitem1); // [5, 4, 3, 2, 1] 
console.log(newitem2); // [6, 5, 4, 3, 2] 

따라서 " each "함수는 원래 배열을 반환하고 " map "함수는 새 배열을 반환합니다

var intArray = [1, 2, 3, 4, 5];
//lets use each function
$.each(intArray, function(index, element) {
  if (element === 3) {
    return false;
  }
  console.log(element); // prints only 1,2. Breaks the loop as soon as it encountered number 3
});

//lets use map function
$.map(intArray, function(element, index) {
  if (element === 3) {
    return false;
  }
  console.log(element); // prints only 1,2,4,5. skip the number 3.
});

Jquery.map은 배열에서 잘 수행되므로 배열 작업을 수행 할 때 더 의미가 있습니다.

Jquery.each는 선택기 항목을 반복 할 때 가장 잘 사용됩니다. map 함수가 선택기를 사용하지 않는다는 것이 입증되었습니다.

$(selector).each(...)

$.map(arr....)

보시다시피 map은 선택기와 함께 사용되지 않습니다.