结合ES6谈一下JS里面的find()方法的使用及注意事项

首先简单的介绍一下ES6是什么，可能很多人还是第一次听说，我们都知道H5是html的新一代的标准，同样，ES6是javascript的新一代标准，全称是ECMAScript 6.0，简称ES6，其实不是什么神秘的东西。15年6月发布的。

今天我们要说的是结合ES6新特性谈一下js里面的一个很好用的方法-find()

现在的前端和过去的不一样，过去的前端只要会画页面就行了，但是现在仅仅会画页面已经远远不够了，现在前端还需要会处理数据，而且还要会将数据分析分类处理。其实不是前端能力提升了而是前端的语言特性决定的。行了不吐槽了！下面我们直接说他的使用场景！

使用场景

如果我们拿到了后端给的数据，需要拿到数据里面符合条件的的第一条的所有信息，一半有两种办法实现，第一种办法是后端直接将数据处理好，我们通过ajax请求拿到返回的数据这是很普遍的一种做法，这样后端的压力比较大，我们举个例子：

/**
 * aim csdn博客 - find()用法
 * author clearlove
 * date 18-08-06
 * 
 */
var stu = [
			    {
			        name: '旺儿',
			        gender: '男',
			        age: 20
			    },
			    {
			        name: '狗剩',
			        gender: '男',
			        age: 20
			    },
			    {
			        name: '小华',
			        gender: '男',
			        age: 20
			    },
			    {
			        name: '李四',
			        gender: '女',
			        age: 25
			    },
			    {
			        name: '李四',
			        gender: '男',
			        age: 26
			    }
			]

我们拿到的是这样的一组用户数据，那么我们需要知道第一个叫李四的人，后端处理的话就需要写一条类似于下面的sql语句

select *from stu where name = (select top1 name from stu where ...);

（鬼知道对不对，很久没写了，大概就这样的sql）这样的sql将数据查询出来，然后将数据发给前端。无疑这种办法行得通，但是我们都知道后端处理数据其实本身对服务器的压力的就大，可能写后端的人深有体会，数据量小的时候还好，数据量大的时候用户查询一个数据需要好几秒，体验就不用说了，而且多并发的时候，很多人同时访问的时候还会出现宕机的情况，所以最好办法就是后端直接将所有的数据给我们，我们将数据放页面，web的存储我前面写过，感兴趣的可以看看，我们拿到数据以后，用户搜索的时候直接查询页面数据，第一速度快，第二对服务器的压力很小。
下面我们讲怎么用前端处理这块的逻辑首先我们拿到了所有的数据这里我直接放到一个测试用的js里面存放，要实现之前说的效果，就需要使用我们今天的主角find()方法。

find()是用来做什么的呢？

find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
在本文章需要注意的几个点：
①、第一个元素
②、测试函数

那么如何使用呢？

下面我们写一个例子看效果

源码

<!--
  aim csdn博客 - find()用法
  author clearlove
  date 18-08-06
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="js/find_testcodes.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style type="text/css">
			table{border: 2px solid black;margin-top: 2rem;}
			table thead tr td{width: 5rem;height: 3rem;border: 1px solid #000000;}
			table tbody tr td{width: 5rem;height: 3rem;border: 1px solid #000000;}
		</style>
	</head>
	<body>
		<input type="text" name="" id="info" value="" />
		<input type="button" name="" id="" value="查询" onclick="serch()" />
		<table>
			<thead><tr><td>姓名</td><td>性别</td><td>年龄</td></tr></thead>
			<tbody id="show"></tbody>
		</table>
	</body>
	<script type="text/javascript">
		    var infos;
			function serch(){
				infos = $("#info").val();
				var codeinfo = stu.find((element) => (element.name == infos));
				var tbody = '<tr><td>'+codeinfo.name+'</td><td>'+codeinfo.gender+'</td><td>'+codeinfo.age+'</td></tr>';
				$("#show").append(tbody);
			}
	</script>
</html>

如果是ES6之前我们怎么写呢？

 var infos;
                     function getStu(element){
                        console.log(infos);
                        return element.name == infos;
                    }
                    function serch(){
                        infos = $("#info").val();
                        var codeinfo = stu.getStu();
                        var tbody = '<tr><td>'+codeinfo.name+'</td><td>'+codeinfo.gender+'</td><td>'+codeinfo.age+'</td></tr>';
                        $("#show").append(tbody);
                    }

如果用ES6写怎么实现呢？

var infos;
                        function serch(){
                            infos = $("#info").val();
                            var codeinfo = stu.find((element) => (element.name == infos));
                            var tbody = '<tr><td>'+codeinfo.name+'</td><td>'+codeinfo.gender+'</td><td>'+codeinfo.age+'</td></tr>';
                            $("#show").append(tbody);
                        }

这里主要是使用了es6的箭头函数。我也是在看这个ES6，所以喜欢的可以一起交流！