极客教程JavaScript find()和filter()方法有什么区别
在本文中，我们将了解javascript中find()和filter()方法的区别。
JavaScript find()方法： find()方法用于查找所选元素的所有后代元素。它通过从根到叶遍历DOM树来查找元素。
语法：
array.find(function(currentValue, index, arr),thisValue);
示例1： 此示例使用 find()方法 来搜索元素。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
(document).ready(function() {
("ul").find(":odd")
.css("background-color", "yellow");
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h4>Find() Method</h4>
<ul>
<li>GeeksforGeeks1.</li>
<li>GeeksforGeeks2.</li>
<ol>
<li>GeeksforGeeks3.</li>
<li>GeeksforGeeks4.</li>
<ul>
<li>GeeksforGeeks5.</li>
<li>GeeksforGeeks6.</li>
</ul>
</ol>
</ul>
</body>
</html>
输出：
JavaScript的filter()方法： filter()方法用于过滤所有元素并返回与条件匹配的元素，不匹配的元素被移除。唯一的区别是filter()方法会搜索所有元素，而find()方法只搜索所有子元素。
语法:
array.filter(callback(element, index, arr), thisValue)
示例2： 使用filter()方法进行搜索时所做的更改。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
(document).ready(function() {
("ul").filter(":odd").
css("background-color", "yellow");
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h4>Find() Method</h4>
<ul>
<li>GeeksforGeeks1.</li>
<li>GeeksforGeeks2.</li>
<ol>
<li>GeeksforGeeks3.</li>
<li>GeeksforGeeks4.</li>
<ul>
<li>GeeksforGeeks5.</li>
<li>GeeksforGeeks6.</li>
</ul>
</ol>
</ul>
</body>
</html>
输出：
让我们以表格形式来看看差异：
| ID | find() | filter() |
|---|---|---|
| 1. | find()方法用于查找所选元素的所有后代元素。 | filter()方法用于过滤所有元素。 |
| 2. | find()方法通过从根到叶遍历DOM树来查找元素。 | filter()方法返回匹配的元素并删除不匹配的元素。 |
| 3. | find()方法只搜索所有子元素。 | filter()方法搜索所有元素。 |
| 4. | 不对空元素执行函数。 | filter()方法不改变原始数组。 |
| 5. | 不改变原始数组。 | filter()方法不对空元素执行函数。 |
| 6. | 它的语法是 -： array.find(function(value, Index, array),thisValue) | 它的语法是 -： array.filter(function(value, Index, array), thisValue) |
| 7. | 如果找不到元素，则此方法返回undefined。 | 在filter()方法中，一个值作为this值传递给函数。 |