首先简单的介绍一下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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/34697.html