Карта JQuery против каждого

Question

В jQuery функции map и each, кажется, делают то же самое. Есть ли практические различия между ними? Когда вы решите использовать один вместо другого?

Answer 1

Метод each предназначен для использования в качестве неизменного итератора, тогда как метод map может использоваться в качестве итератора, но на самом деле он предназначен для манипулирования предоставленным массив и вернуть новый массив.

Еще одна важная вещь, на которую следует обратить внимание, это то, что функция each возвращает исходный массив, а функция map возвращает новый массив. Если вы чрезмерно используете возвращаемое значение функции 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) {});

Answer 2

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!']

Answer 3

Функция 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);

приведет к тому, что s будет [25, 16, 9, 4, 1].

Answer 4

я понял это :

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 " возвращает новый массив

Answer 5

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.
});

Answer 6

Jquery.map имеет больше смысла, когда вы работаете с массивами, поскольку он очень хорошо работает с массивами.

Jquery.each лучше всего использовать при переборе элементов селектора. Что подтверждается тем, что функция карты не использует селектор.

$(selector).each(...)

$.map(arr....)

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