Question

jQuery中map()和filter()之间有什么区别？

请用简单的词语区分两者。

Answer 1

您在jQuery中询问过map和filter。“ jQuery确实有map和filter，单独，JavaScript数组有map和filter。他们的目的和用途是相似的，尽管可悲的是他们给回调的信息是不同的。

filter用于获取jQuery对象或数组并生成一个新的jQuery对象或数组，该对象或数组仅包含原始条目的子集 - 也就是说，我们对其应用过滤器，仅获取条目与过滤器匹配。因此结果将是相同的大小（如果你不删除任何东西）或更小，但从不大，并且只有原始条目。

map用于获取jQuery对象或数组，并根据原始条目生成具有新的不同条目的新jQuery对象或数组。结果将始终与原始大小相同，但结果中的条目可能与原始条目完全不同。

正如您所看到的，他们做了不同的事情：filter从原始条目生成条目的子集，而map生成与原始条目相同大小的结果但是（可能）完全不同的内容。

他们都可以使用回调（map总是这样做）。这些回调的作用非常不同，但是：filter的回调决定是否保留条目：它返回一个标志，其中任何truthy *值表示“保留条目”，任何虚假*值表示“删除它” “。但map的回调返回在生成的jQuery对象或数组中使用的实际条目。

你已经专门询问了jQuery，所以我们先来看一个jQuery示例，看看评论：

// Let's get all the divs inside our #example div
var divs = $("#example div");
console.log("total divs: " + divs.length);

// `filter` lets us take that set of elements and filter out some;
// let's keep only the ones with the class `b`, using the ability
// of jQuery's `filter` to accept a CSS selector
var withb = divs.filter(".b");
console.log("divs with class b: " + withb.length);

// We could have used a callback function instead:
var withb2 = divs.filter(function() {
  // We return a "truthy" value to keep this entry, or a "falsy"
  // one to remove it
  return $(this).hasClass("b");
});
console.log("divs with class b: " + withb2.length);

// `map` lets us create a new jQuery object with completely different
// contents, where each entry is derived from the original entry.
// Let's get a jQuery object containing the `data-foo` value of each
// entry in our divs. The result will be the same size as the original,
// but will have entirely different contents.
var foos = divs.map(function() {
  return $(this).attr("data-foo");
});
console.log("foos.length: " + foos.length);
console.log("foos: " + foos.get().join(", "));

<div id="example">
  <div data-foo="1" class="a b">I'm .a.b</div>
  <div data-foo="2" class="a">I'm .a</div>
  <div data-foo="3" class="b">I'm .b</div>
  <div data-foo="4" class="a b">I'm .a.b</div>
  <div data-foo="5" class="a">I'm .a</div>
  <div data-foo="6" class="b">I'm .b</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

注意map如何让我们创建一个内容不是DOM元素的jQuery对象。 99.999％的时间，jQuery对象包含DOM元素，大多数jQuery方法期望对象包含DOM元素。但是你可以用其他东西创建jQuery对象（比如data-foo上面的字符串）。通常它很少见，并且您几乎总是在结果上使用get()来获得这些值的简单数组。

通常使用jQuery的map和filter，您可以在回调中使用this。它引用jQuery对象中的当前条目。它们还接收参数，例如jQuery对象中条目的索引，有关详细信息，请参阅文档。请注意，jQuery传递其map和filter函数的参数与JavaScript传递其map和filter函数的参数不同。

说到哪......

JavaScript数组也有map和filter。从概念上讲，它们与jQuery的功能相同。我们来看看：

// Say I have
var array = [1, 2, 3, 4, 5, 6];

// I can use `filter` to get an array of just odd numbers:
var odds = array.filter(function(entry) { return entry % 2 == 1; });
console.log("odds: " + odds);

// I can use `map` to get an array of those numbers doubled:
var doubles = array.map(function(entry) { return entry * 2; });
console.log("doubles: " + doubles);

*“truthy”和“falsy”：当用作布尔值时强制为true的值是“truthy”值;强迫false的一个是“假的”。 JavaScript中的虚假值包括0，NaN，null，undefined，""，当然还有false。所有其他价值都是真实的。

Answer 2

filter()用于跳过不需要的集合元素。 map()用于修改集合的元素。

filter()可能会返回原始集合中包含较少元素的集合。它甚至可能返回空集合。 map()将始终返回具有相同数量元素的集合。

filter()和map()都需要将一个函数作为一个函数来处理集合的单个元素。

不同之处在于filter()期望函数根据将跳过的元素返回布尔值。 map()期望该函数返回一个新的集合元素。

filter()，map()和其他一些（例如reduce()）存在是因为观察到许多集合操作算法可以分成两个独立的行为。一个是对元素做某事，另一个是确保对集合中的所有元素都做了一些事情。

希望有所帮助。

jquery中filter和map之间的区别是什么

2 个答案: