В jQuery функции map
и each
, похоже, делают то же самое. Существуют ли какие-либо практические различия между ними? Когда вы решите использовать один вместо другого?
Карта jQuery против каждого
Ответ 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) {});
Ответ 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!']
Ответ 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]
.
Ответ 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]
, поэтому "каждая" функция возвращает исходный массив, а функция "map" возвращает новый массив
Ответ 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.
});
Ответ 6
Jquery.map имеет больше смысла, когда вы выполняете работу над массивами, так как он отлично работает с массивами.
Jquery.each лучше всего использовать при итерации через элементы селектора. Об этом свидетельствует, что функция карты не использует селектор.
$(selector).each(...)
$.map(arr....)
как вы можете видеть, карта не предназначена для использования с селекторами.