首先简单的介绍一下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>
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); }
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); }
喜欢的可以一起交流！
