在JavaScript中，有很多有用的方法可以在数组中查找项目。 您始终可以使用基本的for循环，但是使用ES6 +，有很多方法可以遍历数组并轻松找到所需的内容。
有这么多种不同的方法，您将使用哪种方法？ 例如，当搜索数组时，是否要知道元素是否完全在数组中？ 您需要元素的索引还是元素本身？
对于每种将要介绍的方法，必须了解它们都是Array.prototype的内置方法，这一点很重要。 这意味着您只需要将它们链接到任何带有点符号的数组上即可。 这也意味着这些方法不适用于对象或数组以外的任何对象（尽管与字符串重叠）。
我们将研究以下Array方法：
|
1 2 3 4 |
Array.includes Array.find Array.indexOf Array.filter |
includes
|
1 2 3 |
const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"]; alligator.includes("thick scales"); // returns true |
.includes（）方法返回一个布尔值，非常适合告诉您数组中是否存在元素。 它给出了简单的正确或错误答案。 这是基本语法：
|
1 |
arr.includes(valueToFind, [fromIndex]); |
就像您在我们的示例中看到的那样，我们只有一个参数-valueToFind。 这是数组中要匹配的值。 可选的fromIndex是一个数字，指示要从其开始查找的索引（默认值为0，因此将搜索整个数组）。 因此，由于在我们的示例中，“ thick scales”项位于0索引处，因此以下内容为假：alligator.includes（’thick scales’，1）; 因为它开始从索引1开始搜索。
现在，有几件事要注意。 此.includes（）方法使用严格的比较。 这意味着，在上面的示例中，以下内容将返回false：alligator.includes（’80’）;。 这是因为尽管80 ==’80’是正确的，而80 ===’80’是错误的-不同类型不会通过严格比较.
find
.find（）与include（）方法有何不同？ 如果在我们的示例中，仅将文本“ includes”更改为“ find”，则会出现此错误：
|
1 |
Uncaught TypeError: thick scales is not a function |
那是因为find方法需要传递一个函数。那是因为find方法将不会像“ includes（）”那样只使用简单的比较运算符。 相反，它将把每个元素传递到您的函数中，并查看它是否返回true或false。 因此，尽管这可行：alligator.find（（）=>’thick scales’）;，您可能希望将自己的比较运算符放入函数中，以使其返回任何相关内容。
|
1 2 3 |
const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"]; alligator.find(el => el.length < 12); // returns '4 foot tail' |
在我们的find方法中，这个简单的函数查看数组的每个元素，并为其分配别名“ el”，并在找到第一个为真的元素时停止。在我们的情况下，true的length属性小于12（数字没有length属性）。当然，您可以根据需要使此功能复杂，使您的真实状况满足您的需求。
还要注意，这并没有返回true。 find方法不返回布尔值，而是返回第一个匹配的元素。如果没有匹配的元素（如不存在符合您的函数中定义的条件的元素），则它将返回未定义。还要注意，它返回第一个实例，因此，如果数组中有多个满足条件的元素，它将仅捕获第一个实例。在我们的示例中，如果在“ 4英尺高”之后还有另一个长度小于12的字符串，则不会改变我们的结果。
在我们的示例中，我们仅使用带有一个参数的回调。您还可以添加参数以引用当前元素的索引。另一个参数可以是整个数组本身，但是我发现它很少使用。这是使用索引的示例：
|
1 |
alligator.find((el, idx) => typeof el === "string" && idx === 2); // returns '4 foot tall' |
我们知道在数组中，有3个满足第一个条件的元素（typeof el ===’字符串’）。 如果这是我们唯一的条件，它将返回第一个“ thick scales”。 但是区别在于，只有一个指数为2，即“ 4英尺高”。
说到索引，类似的数组方法是.findIndex（）。 此方法还接收一个函数，但是您可以猜测，它返回匹配元素的索引，而不是元素本身。
indexOf
|
1 2 3 |
const alligator = ["thick scales", 80, "4 foot tail", "rounded snout"]; alligator.indexOf("rounded snout"); // returns 3 |
与.includes（）方法类似，.indexOf（）使用严格的比较，而不是我们在.find（）方法中看到的函数。 但是，与include（）不同，它返回元素的索引，而不是布尔值。 您还可以指示要从数组中的哪个索引开始搜索。
我发现indexOf（）非常有用。 快速简便，可以告诉您元素在数组中的位置，并且可以告诉您元素是否存在。 它如何告诉您该元素是否存在？ 基本上，如果元素返回正数，我们就可以知道它存在；如果返回-1，我们就知道该元素不存在。
|
1 2 3 |
alligator.indexOf("soft and fluffy"); // returns -1 alligator.indexOf(80); // returns 1 alligator.indexOf(80, 2); // returns -1 |
如您所见，尽管我们可以使用find（）或findIndex（）方法为我们提供相同的信息，但是编写起来却要少得多。 我们不必编写用于比较的函数，因为它已经在indexOf方法中。
现在，和其他元素一样，indexOf（）也返回它找到的第一个匹配元素的索引。 JavaScript为我们提供了另一种数组方法.lastIndexOf（）。 如您所料，这与indexOf（）的作用相同，但从数组的最后一个索引开始并向后工作。 您还可以指定第二个参数，但是请记住，索引不变，只是因为您使用的是其他方法。
|
1 2 3 4 5 6 7 |
const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80]; alligator.indexOf(80); // returns 1 alligator.lastIndexOf(80); // returns 4 alligator.indexOf(80, 2); // returns 4 alligator.lastIndexOf(80, 4); // returns 4 alligator.lastIndexOf(80, 3); // returns 1 |
Bonus: filter
|
1 2 3 |
const alligator = ["thick scales", 80, "4 foot tail", "rounded snout", 80]; alligator.filter(el => el === 80); //returns [80, 80] |
filter（）方法类似于find（）方法，因为它需要传递一个函数以及要返回的内容的条件。 主要区别在于，即使只有一个匹配元素，filter（）始终返回一个数组。 但是它将返回所有匹配的元素，而find（）仅返回第一个匹配的元素。
filter的重要之处在于，它返回符合条件的所有元素。 可能只有我一个人，但我可能会感到困惑，以为“这些是我要过滤的元素”，实际上，当您指出要过滤的元素时。
结论
查找内容时，我发现最容易使用的方法是find（）方法，但是如您所见，它实际上取决于您的情况。
您是否只需要知道它是否存在？ 使用.includes（）。
您是否需要获取元素本身？ 对多个项目使用.find（）或.filter（）。
您是否需要查找元素的索引？ 使用.indexOf（）或findIndex（）进行更复杂的搜索。
此处示例中的数组非常简单。 您可能会发现自己拥有一系列对象。 以下是一些非常基本的示例，可在嵌套对象的jungle导航：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const jungle = [ { name: "frog", threat: 0 }, { name: "monkey", threat: 5 }, { name: "gorilla", threat: 8 }, { name: "lion", threat: 10 } ]; // break the object down in order to use .includes() or .indexOf() const names = jungle.map(el => el.name); // returns ['frog', 'monkey', 'gorilla', 'lion'] console.log(names.includes("gorilla")); // returns true console.log(names.indexOf("lion")); // returns 3 - which corresponds correctly assuming no sorting was done // methods we can do on the array of objects console.log(jungle.find(el => el.threat == 5)); // returns object - {name: "monkey", threat: 5} console.log(jungle.filter(el => el.threat > 5)); // returns array - [{name: "gorilla", threat: 8}, {name: 'lion', threat: 10}] |
总而言之，这些都是熟悉的好方法，不久之后，您将发现自己是一个训练有素的JavaScript数组专家！
原文：https://alligator.io/js/array-search-methods/