карта 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]

Ви також можете скористатися функцією карти для видалення елемента з масиву. Наприклад:

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()Функція зворотного дзвінка 's, $.each()' s і .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..

Карта з іншого боку займає масив і повертає новий масив із кожним елементом, зміненим функцією. Це:

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] 

Таким чином, " кожна " функція повертає початковий масив, тоді як функція " 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 найкраще використовувати при ітерації через елементи вибору. Що свідчить про те, що функція карти не використовує селектор.

$(selector).each(...)

$.map(arr....)

як бачите, карта не призначена для використання з селекторами.