案例：员工列表（es6与原生JS应用）——运行时奇异的问题（求解答）

最新推荐文章于 2025-04-02 07:51:43 发布

溜_x_i_a_o_迪

最新推荐文章于 2025-04-02 07:51:43 发布

阅读量299

点赞数 1

分类专栏： Web前端原生JavaScript 文章标签： javascript css3 html5 es6 前端

本文链接：https://blog.youkuaiyun.com/u013946061/article/details/105394972

版权

原生JavaScript 同时被 2 个专栏收录

34 篇文章

订阅专栏

Web前端

32 篇文章

订阅专栏

探讨了一个员工列表在性别筛选和年龄排序过程中遇到的奇怪现象，深入分析了在使用ES6的扩展运算符进行数组拷贝时，直接运行与单步调试下数组状态的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例：员工列表（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>