javascript - jquery中的filter和map有什么区别

Question

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

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

Answer 1

您询问过 map和filter “在 jQuery 中。” jQuery 确实有 map 和 filter ，并且单独，JavaScript 数组有 map 和 filter 。它们的目的和用途相似，但遗憾的是它们提供的回调信息不同。

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

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

正如您所看到的，它们做了不同的事情:filter生成原始条目的子集，而 map产生与原始大小相同但内容(可能)完全不同的结果。

它们都可以使用回调( map 总是如此)。不过，这些回调的作用非常不同: filter的回调决定是否保留条目:它返回一个标志，其中任何 true* 值都表示“保留条目”，任何 falsy* 值表示“删除它”。但是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让我们创建一个 jQuery 对象，其内容不是 DOM 元素。 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 的值当用作 bool 值时是“真”值；强制为 false 的一个是一个“虚假”的。 JavaScript 中的假值是 0 , NaN , null , undefined , "" ，当然还有false 。所有其他值都是真实的。