jQuery map与每个

dth*_*her 233 javascript jquery

在jQuery中,mapeach函数似乎做同样的事情.两者之间是否存在实际差异?你什么时候选择使用一个而不是另一个?

ben*_*wey 265

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]
Run Code Online (Sandbox Code Playgroud)

您还可以使用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]
Run Code Online (Sandbox Code Playgroud)

您还会注意到thismap函数未映射.您将必须在回调中提供第一个参数(例如,我们在i上面使用过).具有讽刺意味的是,每个方法中使用的回调参数与map函数中的回调参数相反,因此要小心.

map(arr, function(elem, index) {});
// versus 
each(arr, function(index, elem) {});
Run Code Online (Sandbox Code Playgroud)

  • 错了,map并不是要改变提供的数组,它意味着根据输入数组和映射函数返回一个*new*数组. (21认同)
  • @DaveVandenEynde如果你想使用`return false;`在循环中断 (6认同)
  • @Seb,读取我的每个函数的链接,第二段jQuery.each函数与$().each()不一样. (4认同)
  • map()也会平滑返回的数组 (4认同)
  • 为什么要使用$ .each? (3认同)
  • 何时使用地图和每个.两者的性能优势是什么? (2认同)

Pat*_*ney 93

1:回调函数的参数相反.

.each()'s,$.each()'s和.map()'s回调函数先取索引,然后取元素

function (index, element) 
Run Code Online (Sandbox Code Playgroud)

$.map()回调有相同的论点,但是相反

function (element, index)
Run Code Online (Sandbox Code Playgroud)

2 : .each(), $.each().map()做一些特别的事情this

each()this指向当前元素的方式调用函数.在大多数情况下,您甚至不需要回调函数中的两个参数.

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

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

// result == ['lions', 'tigers', 'bears']
Run Code Online (Sandbox Code Playgroud)

对于$.map()this变量是指在全局窗口对象.

3:map()对回调的返回值做了一些特别的事情

map()在每个元素上调用该函数,并将结果存储在它返回的新数组中.您通常只需要使用回调函数中的第一个参数.

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

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

// result == ['lions!', 'tigers!', 'bears!']
Run Code Online (Sandbox Code Playgroud)


Mag*_*nar 22

each函数遍历数组,每个元素调用一次提供的函数,并设置this为活动元素.这个:

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

$([5, 4, 3, 2, 1]).each(countdown);
Run Code Online (Sandbox Code Playgroud)

会提醒5..,然后4..3..然后2..1..

另一方面,Map采用数组,并返回一个新数组,其中每个元素都被函数更改.这个:

function squared() {
    return this * this;
}

var s = $([5, 4, 3, 2, 1]).map(squared);
Run Code Online (Sandbox Code Playgroud)

会导致s [25, 16, 9, 4, 1].


Sea*_*ean 18

我明白这个:

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] 
Run Code Online (Sandbox Code Playgroud)

所以," each "函数返回原始数组,而" map "函数返回一个新数组