jQuery map против каждого

Question

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

Answer 1

Метод 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(arr, function(elem, index) {}); 
// versus 
each(arr, function(index, elem) {}); 

Answer 2

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

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

$(selector).each(...) 

$.map(arr....) 

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

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

1: Аргументы функций обратного вызова отменены.

.each() 's, $.each()' s и .map() 'функция обратного вызова возьмем индекс первого, а затем элемент

function (index, element) 

$.map()' s обратного вызова имеет те же аргументы, но обратная

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 5

я понял этим:

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] 

так, "каждый" функция возвращает исходный массив в то время как "карта" функция возвращает новый массив

Answer 6

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