案例：员工列表（es6与原生JS应用）——运行时奇怪的问题（求解答）
完整代码如下：
在视图渲染render方法中，在性别筛选的代码中，switch下的default中，对数组进行拷贝，拷贝前后对原数据数组data和拷贝后的数组进行了打印，出现了奇怪的现象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>员工列表</title>
<style>
* {
margin: 0;
padding: 0;
}
body
a{
text-decoration: none;
color: #0d3a4b;
}
.active{
color: #ffffff;
}
.wrap {
width: 700px;
height: 500px;
background-image: url(./images/bg.png);
background-repeat: no-repeat;
margin: 0 auto;
position: relative;
}
.wrap #table {
width: 460px;
border-radius: 12px;
position: absolute;
left: 50%;
top: 160px;
transform: translateX(-50%);
box-sizing: border-box;
overflow: hidden;
}
.wrap #table thead {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
color: #fff;
background: #4cbfe5;
}
.wrap #table thead a {
color: #fff;
}
.wrap #table tbody {
color: #19c2ff;
}
.wrap #table tbody a {
color: #19c2ff;
}
.wrap #table tbody tr {
background: #fff;
}
.ctrl {
position: absolute;
left: 200px;
top: 100px;
}
.ctrl div {
width: 300px;
line-height: 30px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
</style>
</head>
<body>
<div class="wrap">
<div class="ctrl">
<div class="age_sort_nu">
<a href="javascript:;">年龄从小到大</a>
<a href="javascript:;">年龄从大到小</a>
<a href="javascript:;" class="active">默认排序</a>
</div>
<div class="gender_show">
<a href="javascript:;">只显示男性</a>
<a href="javascript:;">只显示女性</a>
<a href="javascript:;" class="active">默认</a>
</div>
</div>
<table id="table">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<th>0</th>
<th>小明</th>
<th>24</th>
<th>男</th>
</tr> -->
</tbody>
</table>
</div>
<script>
// 数据
let data = [
{
id: 0,
name: '小明',
age: 24,
gender: '男'
},
{
id: 1,
name: '小芳',
age: 30,
gender: '女'
},
{
id: 2,
name: '小美',
age: 31,
gender: '女'
},
{
id: 3,
name: '小刚',
age: 21,
gender: '男'
},
{
id: 4,
name: '小琪',
age: 18,
gender: '女'
}
];
{
let tbody = document.querySelector("#table tbody");
let sortBtns = document.querySelectorAll(".age_sort_nu a");
let filterBtns = document.querySelectorAll(".gender_show a");
let sortState = 2;
let genderState = 2;
render();
sortBtns.forEach((item, index) => {
item.onclick = ()=> {
sortState = index;
render();
}
});
filterBtns.forEach((item, index) => {
item.onclick = ()=> {
genderState = index;
render();
}
});
function render(){
let arr = [];
switch (genderState) {
case 0:
arr = data.filter((item) => {
return (item.gender == "男");
});
break;
case 1:
arr = data.filter((item) => {
return (item.gender == "女");
});
break;
default:
console.log(data);
arr = [...data];
console.log(arr);
/*为啥直接运行，打印arr与data不一样，但是打断点单步执行就一样？*/
break;
}
switch (sortState) {
case 0:
arr.sort((n1, n2) => {
return (n1.age - n2.age);
});
break;
case 1:
arr.sort((n1, n2) => {
return (n2.age - n1.age);
});
break;
default:
break;
}
arr.forEach((item, index) => {
arr[index] = `<tr>
<th>${item.id}</th>
<th>${item.name}</th>
<th>${item.age}</th>
<th>${item.gender}</th>
</tr> `;
});
console.log(arr);
tbody.innerHTML = arr.join("");
}
}
</script>
</body>
</html>
直接运行打开控制台：
拷贝后的arr数组出现了一堆表格的html语句
如果单步调试：
最后数组打印正常：
小编目前还是小菜，求大神指点！！！！
