找和过滤的区别

Question

我最近开始接触jQuery。我看到了find()和filter()这两个方法，但是无法弄清楚它们之间的区别。

这两个方法究竟有什么区别？

- Sarfraz

---

查找操作在找到第一个匹配项后就停止了，而筛选操作会返回所有匹配项。 - Tal

Answer 1

查找 vs 过滤

假设你有这个数组：

var folks = [ 
  {name: "Bob", age: "32", occupation: "developer"}, 
  {name: "Bill", age: "17", occupation: "delinquent"}, 
  {name: "Brad", age: "40", occupation: "yes"} 
]

查找:

folks.find( fella => fella.name === "Bob")
//Returns an object: {name: "Bob", age: "32", occupation: "developer"}

筛选器:

folks.filter( fella => fella.name === "Bob")
//Returns an array: [ {name: "Bob", age: "32", occupation: "developer"} ]

- daCoda

---

允许我提出一个问题：folks.find(fella => name.indexOf("Bob") > -1)会有什么不同？ 我知道indexOf用于在字符串中搜索元素的索引，通常用于搜索子字符串。但我想知道三个等号和indexOf之间的性能差异。 - Kamran

如果搜索失败，find 将返回 undefined，而 filter 将返回一个空数组 []。 - Lucas Matos

find方法返回匹配的对象，而filter方法返回包含匹配对象的数组。在数据模式中，通常会有一个对象数组。通常情况下，当我使用find方法时，我会根据ID或其他唯一标识来查找。而当我使用filter方法时，我会尝试通过搜索关键词等方式来缩小范围。 - Jason

Answer 2

.find() 方法会在找到第一个匹配项后停止搜索，而 .filter() 方法会继续搜索整个数组。

- Julius R

---

如果没有匹配到任何内容，find返回'undefined'。 如果没有匹配到任何内容，filter返回[ ]。 - Ait Friha Zaid

Answer 3

filter 函数用于减少已匹配元素的集合，而 find 函数用于获取匹配元素的后代元素。

（注：filter和find是jQuery库中提供的两个函数，它们在处理HTML文档时非常有用。）

- Darin Dimitrov

---

元素的后代是什么？更重要的是，为什么这是理解答案所必需的信息？请考虑用对术语的解释来改进此答案。 元素的后代指的是通过继承方式派生出来的新元素。这个概念在理解面向对象编程中非常重要，因为它展示了一种基于已有功能构建新功能的方式。理解这个概念可以帮助程序员更好地设计和组织代码。 - Patrick

Answer 4

在寻找答案时，我发现了一篇不错的博客，解释了同样的问题。
Mkyong写道：

filter()和find()方法非常相似，唯一的区别是前者适用于所有元素，而后者仅搜索子元素。

• filter() - 搜索所有元素。
• find() - 仅搜索所有子元素。

尝试他的演示：

$(document).ready(function() {
  $("#filterClick").click(function() {
    $('div').css('background', 'white');
    $('div').filter('#Fruits').css('background', 'red');
  });

  $("#findClick").click(function() {
    $('div').css('background', 'white');
    $('div').find('#Fruits').css('background', 'red');
  });
});

div {
  padding: 8px;
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<h1>jQuery find() vs filter() example</h1>
<div id="Fruits">
  Fruits
  <div id="Apple">Apple</div>
  <div id="Banana">Banana</div>
</div>
<div id="Category">
  Category
  <div id="Fruits">Fruits</div>
  <div id="Animals">Animals</div>
</div>
<br/><br/><br/>
<input type='button' value='filter(Fruits)' id='filterClick'>
<input type='button' value='find(Fruits)' id='findClick'>

在jsFiddle上查看

- bkk

Answer 5

find()

find()方法返回与选择器匹配的所选元素的后代元素。

从文档中了解到：

描述：获取当前匹配元素集合中每个元素的后代元素，通过筛选器进行过滤。

filter()

filter()方法基于选择器或提供的函数来过滤元素。

从文档中了解到：

描述：将匹配元素集合缩减为与选择器匹配或通过函数测试的元素。

- AxelEckenberger

Answer 6

考虑你有一个对象数组，其'id'属性存在重复的值，请看下面的find和filter方法的结果。

let arrObj = [  { id:1, name:"One" },
                { id:2, name:"Two" },
                { id:1, name:"One" }
            ];

var resultObj    = arrObj.find(v => v.id === 1);    // { id: 1, name: 'One'}

var resultArrObj = arrObj.filter(v => v.id === 1);  // [ 
                                                    //   { id:1, name:"One" },
                                                    //   { id:1, name:"One" }
                                                    // ]

find:

1. 当条件成立时，停止迭代。

2. 如果没有匹配项，则返回'undefined'。

filter:

1. 迭代数组中的所有项。

2. 始终返回一个数组。

- SridharKritha

Answer 7

find() 方法返回给定选择器的匹配元素的子元素，filter() 方法查找匹配元素并返回符合给定选择器的元素。

- Dean Harding

Answer 8

find()和filter()两个方法都与数组一起使用。

    let customers = [{
        name: 'ABC Inc',
        credit: 100
    }, {
        name: 'ACME Corp',
        credit: 200
    }, {
        name: 'IoT AG',
        credit: 300
    }];
    

find()是什么？find()方法返回集合中与之相匹配的第一个值。如果所期望的值匹配，find()方法将从开头搜索数组，然后返回该值并终止，不再处理其余数组。

    let findCustomers = customers.find(customer=>{
    return customer.credit<300
    })
    
    console.log(findCustomers)
    
    /// [{
       name: 'ABC Inc',
        credit: 100
    }];
    
    

filter()是什么？filter()方法从数组中返回匹配的值。它从开始到结束搜索整个数组，并返回所有匹配的值。

    let findCustomers = customers.flter(customer=>{
    return customer.credit<300
    })
    
    console.log(findCustomers)
    
    /// [{
    name: 'ABC Inc',
    credit: 100
    }, {
    name: 'ACME Corp',
    credit: 200
    }];

- Chandrakesha Rao

Answer 9

filter会返回数组和找到的数据，而find只会返回数组中的数据，而不是整个数组。

- Bilal Yaqoob

---

你的回答除了之前的答案之外没有增加任何价值。 - Tomer Shetah

Answer 10

查找：

1. 返回符合条件的第一项
2. 返回一个对象或值
3. 如果没有匹配项，返回undefined

过滤：

1. 返回所有匹配项
2. 始终返回数组
3. 如果没有匹配项，则返回空数组，例如[]

让我们看一些例子：

const array1 = [5, 12, 8, 130, 44];
**// find**
const found = array1.find(x => x > 10);  
// Return 12

**//filter**
const found = array1.filter(element => element > 10);
// Return [12, 130, 44]

让我们看一些对象数组的例子：

let person = [ 
  { name: "Bob", age: "32", occupation: "developer" }, 
  { name: "Bill", age: "17", occupation: "delinquent" }, 
  { name: "Brad", age: "40", occupation: "yes" } 
];

const found = person.find(item => item.age > 30);
// return { name: "Bob", age: "32", occupation: "developer" }

const found = person.filter(item => item.age > 30);
/* return [
  { name: "Bob", age: "32", occupation: "developer" }, 
  { name: "Brad", age: "40", occupation: "yes" }
] */

- Ali Adravi