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

结合ES6谈一下JS里面的find()方法的使用及注意事项首先简单的介绍一下ES6是什么,可能很多人还是第一次听说,我们都知道H5是html的新一代的标准,同样,ES6是javascript的新一代标准,全称是ECMAScript6.0,简称ES6,其实不是什么神秘的东西。15年6月发布的。今天我们要说的是结合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 
在本文章需要注意的几个点: 
①、第一个元素 
②、测试函数

那么如何使用呢?

下面我们写一个例子看效果
结合ES6谈一下JS里面的find()方法的使用及注意事项

源码

<!--
  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);
                        }

结合ES6谈一下JS里面的find()方法的使用及注意事项
喜欢的可以一起交流!

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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注