ES7 中如何使用 Array.prototype.includes 方法实现动态搜索
随着互联网的迅速发展，搜索功能已经成为了许多网站和应用程序必不可少的功能之一。在前端开发中，我们经常需要实现搜索功能，而动态搜索则是其中一个常见的需求。在 ES7 中，我们可以使用 Array.prototype.includes 方法来实现动态搜索。
Array.prototype.includes 方法是 ES7 中新增的一个数组方法，用于判断一个数组是否包含某个元素。它的语法如下：
-------------------------- -----------
其中，arr 表示要进行搜索的数组，valueToFind 表示要查找的值，fromIndex 是可选参数，表示从哪个位置开始搜索，默认值为 0。
接下来，我们来看一下如何使用 Array.prototype.includes 方法实现动态搜索。
首先，我们需要一个输入框，用于输入搜索关键字。然后，我们可以在输入框的 onchange 事件中触发搜索操作。具体实现代码如下：
------ ----------- ---------------- -------------------- --- ---------- -------------- --------------- --------------- ------------- -----
-------- -------- -
----- ----- - ---------------------------------------
----- ------- - --------------------------
----- ---- - --------------------------------
----- ----- - --------------------------------
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
----- ---- - -----------------------------
-- ------------------------ -
------------------ - --------
- ---- -
------------------ - -------
-
-
-上述代码中，我们首先获取了输入框和列表元素。然后，在搜索操作中，我们将输入框的值转换为小写字母，并遍历列表中的每一个 li 元素。对于每一个 li 元素，我们获取其文本内容，并将其转换为小写字母。然后，我们使用 Array.prototype.includes 方法来判断文本内容中是否包含搜索关键字。如果包含，我们将其显示出来，否则隐藏起来。
通过上述代码，我们就成功地实现了一个简单的动态搜索功能。当用户输入搜索关键字时，列表中只会显示包含该关键字的项，从而实现了动态搜索的效果。
除了在前端开发中实现动态搜索功能，Array.prototype.includes 方法还可以用于其他场景，比如判断一个数组中是否包含某个元素，或者查找一个字符串中是否包含某个子串等等。因此，熟练掌握 Array.prototype.includes 方法对于前端开发人员来说是非常重要的。
总结：
本文介绍了 ES7 中如何使用 Array.prototype.includes 方法实现动态搜索功能。通过学习本文，读者不仅可以了解到 Array.prototype.includes 方法的使用方法，还可以学习到如何在前端开发中实现动态搜索功能。同时，本文还提供了示例代码，方便读者进行实践和学习。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660612e4d10417a222401bcd