前端开发萌新一枚，不定时分享我在学习中遇到的问题和解决办法。
目录
前言
本题将会使用到一些
lodash
以及
jquery
方面的知识，但不管是库还是原生，它们解题的思路都是一样的，我们在这个阶段所关注的东西并不是说需要去记多少多少的方法，而是思考和掌握解题的思路。通过不过的测试，去发现问题所在。进而找到解决问题的办法。
逻辑思维才是学习编程语言的重中之重。
提示：以下是本篇文章正文内容，下面案例可供参考
一、需求
1.通过点击查询按钮可以将学生列表中我想要通过某个信息去查询到的所有匹配信息显示在查询结果中
2.没有找到相应信息则弹窗提示
二、题干
let students = [{ score: 60, name: "张三", grade: "B" },
{ score: 80, name: "李四", grade: "A" },
{ score: 40, name: "王五", grade: "C" },
{ score: 80, name: "韩立", grade: "A" }];
三、思路
1.抛开样式来说，我们注意到，此题的第一个需求应该是将题干中给到的数组的内容渲染到对应到学生列表当中去。
2.既然是查询功能，肯定会有一个输入框来供用户进行交互，以及一个点击按钮来实现对应用户输入的信息在学生列表中的某项信息进行匹配
3.将匹配的信息包括匹配的信息和其他的姓名、等级等信息都匹配到查询结果上去。
四.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>成绩查询</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
* {
margin: 0;
padding: 0;
}
header {
text-align: center;
}
</style>
<body>
<header class="jumbotron">
<h1>欢迎您!</h1>
<p>在这里您可以进行一些操作，用来查询成绩以及姓名、性别、年龄等...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">开始</a></p>
</header>
<main>
<!-- 成绩查询 -->
<section>
<h1>成绩查询</h1>
<div class="row">
<div class="col-lg-6">
<div class="input-group" style="display:flex;">
<div class="input-group-btn" style="width: 62px;">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">成绩<span class="caret"></span></button>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="..." style="width:100px;" id="query_text"
placeholder="请输入成绩" value="">
<button type="button" class="btn btn-default" id="query_btn">查询</button>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</section>
<!-- 查询结果 -->
<aside>
<h1>查询结果</h1>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>成绩</th>
<th>姓名</th>
<th>等级</th>
</tr>
</thead>
<tbody id="students_result">
</tbody>
</table>
</aside>
<!-- 学生列表 -->
<footer>
<h1>学生列表</h1>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>成绩</th>
<th>姓名</th>
<th>等级</th>
</tr>
</thead>
<tbody id="students_list">
</tbody>
</table>
</footer>
</main>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
<script>
let students = [{ score: 60, name: "张三", grade: "B" },
{ score: 80, name: "李四", grade: "A" },
{ score: 40, name: "王五", grade: "C" },
{ score: 80, name: "韩立", grade: "A" }];
// 学生列表渲染
students_list.innerHTML += _.template(
'<% _.forEach(students, function(item) { %><tr><td><%- item.score %></td><td><%- item.name %></td><td><%- item.grade %></td></tr><% }); %>'
)();
// 查询
$("#query_btn").click(function () {
students_result.innerHTML = '';
let result = students.filter(function (item) { return item.score == query_text.value });
if (result.length >= 1) {
_(result).forEach(function (value) {
students_result.innerHTML += `<tr><td>${value.score}</td>
<td>${value.name}</td>
<td>${value.name}</td>
</tr>`
});
}
if(result.length < 1)(
alert("没有找到成绩")
)
query_text.value = '';
});
</script>
</body>
</html>
五、详解
注·由于我在写html内容的时候已经直接写了id，所以在script中就可以不用获取，直接写它的id就可以进行操作了。
1.先通过innerHTML的方法将数据渲染到学生列表上去，这一步操作没有什么难度。
2.点击事件用到了jQuery的知识，通过
$('#id')
的方式可以获取到html中的id，这里的
students_result
之所以要将内容删除是因为我在每次点击了按钮之后它都会将匹配的信息添加到
students_result
中，会出现上一次匹配结果的累加，这很显然是不符合我们的实际需求的，所以就在每次都复发了点击事件后就将
students_result
的结果删除了。
3.利用数组的方法
filter
进行遍历，会返回一个满足匿名函数中条件的数组。
4.这个时候返回值
result
中返回的是一个数组，有匹配值的时候就是相应的数组对象，没有匹配值的时候返回的是一个空数组即
[]
，通过
console.log(result)
是可以查看的。
5.所以这里的if条件判断我使用了数组的长度的方式进行判断，因为只要在遍历的时候有对应值返回的话，那么返回的数组，即result的长度是肯定>=1的，反之，没有对应值，它的长度就应该<1。
6.最后再将输入框的内容清除掉，用户在进行了这次操作之后原本显示在输入框中的内容就没有了，用户在下次输入的时候就不用手动的去删除了，提升了用户体验。
总结
本题比较简单，这里只写了获取对应成绩进行匹配的方法，其他的查询，例如查询姓名，查询学号等方式都大同小异，知识判断的条件不一，也是很好实现的。