使用数组常用方法，对表格进行筛查或判断，实现如下效果
通过点击上方按钮可以做出筛选或判断效果（请注意这篇文章主要是对数组方法运用的练习，只是实现基本功能，在实际运用中还有许多需要和可以完善优化的地方），大体思路如下:
将所有信息汇聚成对象，通过js渲染到html上，再通过绑定对应的点击事件，使用对应的数组方法来筛选或者判断，再将筛选或判断出的结果渲染到网页上。
具体执行步骤：
首先搭建html结构和完善css样式
<!-- html结构 -->
<p>
<button class="btn1">按照学号排序sort</button>
<button class="btn2">筛选出大于18岁的学生filter</button>
<button class="btn3">是否有不及格的学生小于60分some</button>
<button class="btn4">是否所有学生都满18岁every</button>
<button class="btn5">把所有学生的年龄加1map</button>
<button class="btn6">找出第一个分数大于等于80的学生find</button>
</p>
<table class="table1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>分数</th>
</tr>
</thead>
<tbody></tbody>
</table>
<p>筛选结果如下：</p>
<table class="table2">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>分数</th>
</tr>
</thead>
<tbody></tbody>
</table> <style>
/* css样式 */
tr,td,th{
border: 1px solid black;
}
td,th{
padding: 8px 20px;
}
table{
border-collapse: collapse;
}
</style>后添加js交互
1.一来我们首先想到的应该是需要将标题表格对应的内容渲染到网页上，同时我们也要注意一点：因为我们后面点击交互中下面的筛选表格也有内容要渲染上去，所有建议直接封装一个渲染数据的函数，这样后面可以节省大量代码同时避免代码冗余；
// 封装渲染函数
const renden = function(array , node){
let html = ''; // 用来接传入数组元素拼接的字符串
array.forEach(function(v){
html += `
<tr>
<th>${v['学号']}</th>
<th>${v['姓名']}</th>
<th>${v['年龄']}</th>
<th>${v['爱好']}</th>
<th>${v['分数']}</th>
</tr>
`;
})
node.innerHTML = html; // 使用innerHTML将html内容渲染到网页上
}2.获取节点
// 原表格节点
const table1Noed = document.querySelector('.table1 tbody');
// 筛选表格节点
const table2Noed = document.querySelector('.table2 tbody');
// 下面为对应按钮节点
const btn1Noed = document.querySelector('.btn1');
const btn2Noed = document.querySelector('.btn2');
const btn3Noed = document.querySelector('.btn3');
const btn4Noed = document.querySelector('.btn4');
const btn5Noed = document.querySelector('.btn5');
const btn6Noed = document.querySelector('.btn6');3.将需要渲染到标题表格的内容使用上面封装的渲染函数渲染上去
let arr = [
{'学号':003, '姓名':'小源', '年龄':20, '爱好':'足球', '分数':59,},
{'学号':001, '姓名':'小明', '年龄':22, '爱好':'css', '分数':90,},
{'学号':002, '姓名':'小红', '年龄':17, '爱好':'篮球', '分数':70,},
{'学号':006, '姓名':'小王', '年龄':14, '爱好':'乒乓球', '分数':45,},
{'学号':004, '姓名':'小郭', '年龄':18, '爱好':'html', '分数':67,},
{'学号':005, '姓名':'小张', '年龄':21, '爱好':'js', '分数':79,},
]
renden(arr , table1Noed);4.给对应按钮绑定事件和配置参数：
4.1 按照学号排序sort
这里是要求点击按钮后原表格按照照学号进行排序。我们先绑定点击事件（click），后在事件函数中使用sort()，sort()这个方法是将数组按照unicode码进行排序（注意：这个方法在针对元素为负数的情况排列顺序就会颠倒，所有一般都会传入函数完善），其中我们就按照arr数组元素中的'学号'这个键名对应的键值进行比较，后声明一个变量接住返回的新数组，在使用上面封装的方法渲染这个新数组即可。
// 按照学号排序sort
btn1Noed.addEventListener('click' , function(){
let arr1 = arr.sort((a ,b) => a['学号'] - b['学号']);
renden(arr1 , table2Noed);
})4.2 筛选出大于18岁的学生filter
要求点击按钮后就筛选出年龄大于18的学生。在绑定事件后，我们使用filter()，这个方法是筛选出数组中符合要求的元素，返回一个新数组。我们直接在filter传入的函数中判定每个元素的'年龄'中键名对应的键值是否大于18，后还是将返回的数组赋给一个新声明的变量，在使用renden()渲染即可。
// 筛选出大于18岁的学生filter
btn2Noed.addEventListener('click' , function(){
let arr1 = arr.filter(v => v['年龄']>18)
renden(arr1 , table2Noed);
})4.3 是否有不及格的学生小于60分some
要求点击按钮后判定学生中是否有分数小于60的。我们这里使用some()方法，它是判定数组中是否有一个符合要求的元素，返回的true/false（可以理解为遇真就停）。我们直接在some方法中判断各元素的'分数'对应的键值小于60，如果有就返回true，反之就返回false。我们在使用三元运算符用alert()在网页上显示出是否有成绩不合格的学生。
// 是否有不及格的学生小于60分some
btn3Noed.addEventListener('click' , function(){
let arr1 = arr.some(v => v['分数']<60)
arr1 ? alert('有成绩不及格的学生') : alert('学生成绩全都合格');
})4.4 是否所有学生都满18岁every
要求是点击后判定是否所有学生都年满18岁。这里使用every()，这个方法和上面的some()相像，这是判断数组中的元素是否全都符合要求，同样返回true/false（可以理解为遇假就停）。我们在every()中判断各元素的'年龄'大于18，都大于就返回true，反之false。剩下步骤和4.3相同。
// 是否所有学生都满18岁every
btn4Noed.addEventListener('click' , function(){
let arr1 = arr.every(v => v['年龄']>18)
arr1 ? alert('学生都满18岁') : alert('有学生没有满18岁');
})4.5 把所有学生的年龄加1map
要求点击按钮后给所有学生的年龄加1。这里使用的是map()，这是可以处理每个元素的值，返回的是一个数组，但是要格外注意map方法在数组元素为值时不影响原数组，当数组元素为引用类型时会影响原数组，这里这种情况可以使用深拷贝解决（因为本文章是阐述数组方法的使用，所有后面就不做演示了）。在map方法中让元素的'年龄'自加1，后返回各元素，后续操作于4.1和4.2相同。
// 把所有学生的年龄加1map
btn5Noed.addEventListener('click' , function(){
let arr1 = arr.map(function(v){
v['年龄'] += 1;
return v;
})
renden(arr1 , table2Noed);
})4.6 找出第一个分数大于等于80的学生find
要求点击后筛选出第一个分数大于等于80的学生。这使用find()，find()是筛选出数组中第一个符合要求的元素并返回它。在方法中判断各元素的'分数'大于等于80，用新变量接住筛选出的元素，在渲染的时候要注意，因为find()返回给我们的是一个元素，并不是数组，使用我们在渲染的时候要加上一个[]来将元素对象转为数组，再使用封装的renden()函数进行渲染。
// 找出第一个分数大于等于80的学生find
btn6Noed.addEventListener('click' , function(){
let arr1 = arr.find(v => v['分数']>=80)
renden([arr1] , table2Noed);
})再次声明，以上代码只是为了实现上述基本功能和练习使用数组方法，其实有很多地方在实际运用上还可以进行完善和优化，希望上述代码能为你带来帮助。完整js代码如下：
// 封装渲染函数
const renden = function(array , node){
let html = ''; // 用来接传入数组元素拼接的字符串
array.forEach(function(v){
html += `
<tr>
<th>${v['学号']}</th>
<th>${v['姓名']}</th>
<th>${v['年龄']}</th>
<th>${v['爱好']}</th>
<th>${v['分数']}</th>
</tr>
`;
})
node.innerHTML = html; // 使用innerHTML将html内容渲染到网页上
}
// 获取相应节点
// 原表格节点
const table1Noed = document.querySelector('.table1 tbody');
// 筛选表格节点
const table2Noed = document.querySelector('.table2 tbody');
// 下面为对应按钮节点
const btn1Noed = document.querySelector('.btn1');
const btn2Noed = document.querySelector('.btn2');
const btn3Noed = document.querySelector('.btn3');
const btn4Noed = document.querySelector('.btn4');
const btn5Noed = document.querySelector('.btn5');
const btn6Noed = document.querySelector('.btn6');
let arr = [
{'学号':003, '姓名':'小源', '年龄':20, '爱好':'足球', '分数':59,},
{'学号':001, '姓名':'小明', '年龄':22, '爱好':'css', '分数':90,},
{'学号':002, '姓名':'小红', '年龄':17, '爱好':'篮球', '分数':70,},
{'学号':006, '姓名':'小王', '年龄':14, '爱好':'乒乓球', '分数':45,},
{'学号':004, '姓名':'小郭', '年龄':18, '爱好':'html', '分数':67,},
{'学号':005, '姓名':'小张', '年龄':21, '爱好':'js', '分数':79,},
]
renden(arr , table1Noed);
// 按照学号排序sort
btn1Noed.addEventListener('click' , function(){
let arr1 = arr.sort((a ,b) => a['学号'] - b['学号']);
renden(arr1 , table2Noed);
})
// 筛选出大于18岁的学生filter
btn2Noed.addEventListener('click' , function(){
let arr1 = arr.filter(v => v['年龄']>18)
renden(arr1 , table2Noed);
})
// 是否有不及格的学生小于60分some
btn3Noed.addEventListener('click' , function(){
let arr1 = arr.some(v => v['分数']<60)
arr1 ? alert('有成绩不及格的学生') : alert('学生成绩全都合格');
})
// 是否所有学生都满18岁every
btn4Noed.addEventListener('click' , function(){
let arr1 = arr.every(v => v['年龄']>18)
arr1 ? alert('学生都满18岁') : alert('有学生没有满18岁');
})
// 把所有学生的年龄加1map
btn5Noed.addEventListener('click' , function(){
let arr1 = arr.map(function(v){
v['年龄'] += 1;
return v;
})
renden(arr1 , table2Noed); // 注意map方法在数组元素的元素为值时不影响原数组,当数组元素为引用类型时会影响原数组,这里这种情况可以使用深拷贝解决
})
// 找出第一个分数大于等于80的学生find
btn6Noed.addEventListener('click' , function(){
let arr1 = arr.find(v => v['分数']>=80)
renden([arr1] , table2Noed); // 这里的arr1因为返回的是一个对象(也就是数组的一个元素),所有需要加上一个[]转化为数组
})
7277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
