在前端开发中，表单搜索是一个常见的需求。通常，我们会在输入框中输入关键字，然后在表格或列表中查找包含该关键字的数据。在 ES7 中，数组新增了一个 find 方法，它能够快速地帮助我们实现这个功能。
find 方法的介绍
在 ES7 中，数组新增了 find 方法，它的作用是在数组中查找第一个符合条件的元素，并返回该元素。它的语法如下：
------------------------- ------ ------ - -- --- ---
其中，array 表示要查找的数组，function 是一个回调函数，它接收三个参数：
item：表示当前迭代到的元素；index：表示当前元素在数组中的索引；array：表示原始数组。
当回调函数返回 true 时，find 方法会停止迭代并返回符合条件的元素。如果没有符合条件的元素，则返回 undefined。
利用 find 方法实现表单搜索
接下来，我们结合一个实例来演示如何使用 find 方法实现表单搜索。
假设我们有一个包含 name 和 age 字段的数组：
--- ---- - - - ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ---------- ---- -- -- - ----- -------- ---- -- - --
我们需要实现一个搜索功能，在输入框中输入关键字，然后在数组中查找包含该关键字的对象，并将结果显示在页面上。
首先，我们可以监听输入框的 input 事件，每当输入框中的内容发生变化时，便执行搜索操作：
--- ----- - --------------------------------
------------------------------- ---------- -
--- ------- - ------------
--- ------ - ------------------------ -
------ ----------------------------
---
-------------------- -- --------
---在搜索操作中，我们首先获取输入框的值作为关键字，然后使用 find 方法在数组中查找包含该关键字的对象。回调函数中使用了 includes 方法判断对象的 name 属性是否包含关键字。
当找到符合条件的对象后，我们可以将它的值展示在页面上：
--- ----- - --------------------------------
--- ------ - ---------------------------------
------------------------------- ---------- -
--- ------- - ------------
--- ------ - ------------------------ -
------ ----------------------------
---
------------------ - ------ - ---------- - --------------
---在这个例子中，我们将搜索结果的 age 属性展示在了页面上，如果没有符合条件的对象，提示没有找到。
总结
本文介绍了 ES7 中新增的 find 方法，并结合实例演示了如何使用它实现表单搜索。通过学习本文，读者可以进一步熟悉 ES7 中的新特性，掌握在实际开发中使用 find 方法的方法和技巧。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c4723c83d39b48817fd394