结合ES6谈一下JS里面的find()方法的使用及注意事项
结合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="查询" οnclick="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);
}