查找和过滤器之间的区别

Question

查找和过滤器之间的区别

Sar*_*raz 17 jquery

我最近跳进了jQuery的世界.我看到了方法find(),filter()但无法弄清楚两者之间的区别.

这两者究竟有什么区别？

Answer 1

Dar*_*rov 27

filter减少已匹配元素的集合,而find获取匹配元素的后代.

什么是元素的后代？更重要的是，为什么需要信息来理解答案？请考虑通过解释所使用的术语来改进此答案。 (6认同)

Answer 2

小智 23

.find() 将在第一次匹配后查找并停止，而 .filter() 将继续搜索整个数组

Answer 3

bkk*_*bkk 9

在寻找问题的答案时,我发现了一个不错的博客,并解释了同样的问题.这是链接

你也试试jsfiddle

<html>
<head>
    <style>div{ padding:8px; border:1px solid; }</style>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
       $(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');
         });     
     });        

    </script>
</head>
<body>
    <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'>     
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 4

Axe*_*ger 7

找()

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

来自doc:

描述:获取当前匹配元素集中每个元素的后代,由选择器过滤.

过滤()

filter() 根据选择器或提供的函数过滤元素.

来自doc:

描述:将匹配元素集减少到与选择器匹配的元素集或通过函数测试.

Answer 5

Sri*_*tha 7

假设您有一个“id”具有重复值的对象数组，请参阅下面的查找和过滤方法的结果。

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" } // ]
Run Code Online (Sandbox Code Playgroud)
find:

一旦条件为真，则停止进一步迭代。

如果没有匹配，则返回“未定义”

filter:

迭代数组中的所有项目。

始终返回一个数组。

Answer 6

Dea*_*ing 5

find()返回给定选择器的匹配元素的子元素，filter()查看匹配的元素并返回也与给定选择器匹配的元素。

Answer 7

daC*_*oda 5

查找与过滤

假设您有以下数组：

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

Run Code Online (Sandbox Code Playgroud)

查找：

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

Run Code Online (Sandbox Code Playgroud)

筛选器：

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

Run Code Online (Sandbox Code Playgroud)

如果搜索失败，“find”将返回“undefined”，而过滤器将返回一个空数组“[]” (2认同)

归档时间：	15 年，5 月前
查看次数：	12418 次
最近记录：	6 年，3 月前