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