在前端开发中，我们经常需要对数组进行操作，而在处理数组时，我们可能需要使用到 find() 方法来查找数组中符合条件的元素。在 ES5 中，我们通常会使用匿名函数来实现这一功能，但是在 ES6/ES7 中，我们可以使用更加简洁的语法来实现同样的功能。
ES5 中的 find() 方法
在 ES5 中，我们可以使用数组的 find() 方法来查找符合条件的元素。该方法的语法如下：
array.find(callback[, thisArg])
其中，callback 是一个函数，用于对数组的每一个元素进行测试，如果该元素符合条件，则返回该元素；如果数组中没有符合条件的元素，则返回 undefined。
例如，我们可以使用如下代码来查找数组中第一个大于 10 的元素：
var arr = [1, 5, 10, 15, 20];
var result = arr.find(function(item) {
return item > 10;
});
console.log(result); // 15在这个例子中，我们定义了一个匿名函数来作为 callback 参数，该函数用于测试每一个数组元素是否大于 10。当找到第一个符合条件的元素时，该元素会被返回。
ES6/ES7 中的 find() 方法
在 ES6/ES7 中，我们可以使用更加简洁的语法来实现同样的功能。具体来说，我们可以使用箭头函数来替代匿名函数，从而使代码更加简洁易懂。
例如，我们可以使用如下代码来查找数组中第一个大于 10 的元素：
const arr = [1, 5, 10, 15, 20]; const result = arr.find(item => item > 10); console.log(result); // 15
在这个例子中，我们使用箭头函数来替代了匿名函数，从而使代码更加简洁易懂。同时，由于箭头函数的 this 指向是固定的，因此我们也不需要使用 thisArg 参数来指定 this 指向。
总结
使用 ES7 的 Array.prototype.find() 方法可以让我们更加简洁地实现数组元素的查找功能，从而使代码更加易读易懂。同时，由于使用箭头函数可以避免 this 指向问题，因此我们也不需要再使用 thisArg 参数来指定 this 指向。
在实际开发中，我们应该尽可能地使用 ES7 的 Array.prototype.find() 方法来替代匿名函数，从而使代码更加简洁易懂。同时，我们也应该学习和掌握其他 ES6/ES7 中的语法，以便更加高效地进行前端开发。
示例代码
// javascriptcn.com 代码示例
// ES5
var arr = [1, 5, 10, 15, 20];
var result = arr.find(function(item) {
return item > 10;
});
console.log(result); // 15
// ES6/ES7
const arr = [1, 5, 10, 15, 20];
const result = arr.find(item => item > 10);
console.log(result); // 15来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6574bd0ed2f5e1655ddebfca