我最近开始接触jQuery。我看到了
这两个方法究竟有什么区别?
find()
和filter()
这两个方法,但是无法弄清楚它们之间的区别。这两个方法究竟有什么区别?
find()
和filter()
这两个方法,但是无法弄清楚它们之间的区别。查找 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"} ]
find
将返回 undefined
,而 filter
将返回一个空数组 []
。 - Lucas Matos.find() 方法会在找到第一个匹配项后停止搜索,而 .filter() 方法会继续搜索整个数组。
在寻找答案时,我发现了一篇不错的博客,解释了同样的问题。
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上查看
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
:
当条件成立时,停止迭代。
如果没有匹配项,则返回'undefined'。
filter
:
迭代数组中的所有项。
始终返回一个数组。
find()
方法返回给定选择器的匹配元素的子元素,filter()
方法查找匹配元素并返回符合给定选择器的元素。
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
}];
filter会返回数组和找到的数据,而find只会返回数组中的数据,而不是整个数组。
查找:
过滤:
让我们看一些例子:
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" }
] */