JavaScript中reverse()方法在循环内失效？下拉框未按逆序显示

Ah，这个问题的核心在于你对Array.reverse()方法的特性理解不够深入——它是原地修改原数组的，而不是返回一个全新的反转数组。咱们一步步拆解你代码里发生的事：

1. 接口返回的data.usersList是按createDate递增排序（旧数据在前，新数据在后）。
2. 你第一次调用data.usersList.reverse()：这个操作直接把原数组反转成了新数据在前、旧数据在后的顺序，console.log打印的正是这个反转后的数组，这时候看起来是对的。
3. 但紧接着你在$.each里又调用了一次data.usersList.reverse()：这时候原数组又被反转了一次，直接回到了最初的递增顺序（旧数据在前）！所以你遍历的其实是原始顺序的数组，下拉菜单自然不会显示逆序内容。

简单说，两次原地反转等于绕回了起点，白忙活了一次。

那怎么解决呢？有两种常见的思路：

方案一：只反转一次，复用反转后的数组 #

既然reverse()已经修改了原数组，那直接用修改后的数组遍历就行，不要再重复调用reverse()：

success : function(data) {
    console.log("Sept 18 : Testing getUserByDate webservice");
    // 只执行一次反转，把结果存下来（或者直接用原数组，因为已经被修改了）
    const reversedUsers = data.usersList.reverse();
    console.log(reversedUsers);
    // 直接遍历反转后的数组，用item参数比data.usersList[i]更直观安全
    $.each(reversedUsers, function (i, item) {
        $("#userSetList").append(`<option><a href="#" >${item.title} | ${item.userSetId} | ${moment(item.createDate).format('MM/DD/YYYY')}</a></option>`);
    });
}

方案二：不修改原数组，复制后反转（推荐保留原数组的场景） #

如果你不想改变原数组的顺序，可以先用slice()复制一份数组，再对副本进行反转操作：

success : function(data) {
    console.log("Sept 18 : Testing getUserByDate webservice");
    // slice()不带参数会复制整个数组，反转副本后原数组不受影响
    const reversedUsers = data.usersList.slice().reverse();
    console.log(reversedUsers);
    $.each(reversedUsers, function (i, item) {
        $("#userSetList").append(`<option><a href="#" >${item.title} | ${item.userSetId} | ${moment(item.createDate).format('MM/DD/YYYY')}</a></option>`);
    });
}

另外提个小建议：在$.each里用第二个参数（当前遍历的元素item）访问数据，比通过data.usersList[i]更安全——毕竟如果数组在遍历过程中被意外修改，索引对应的元素可能和你预期的不一致。

内容的提问来源于stack exchange，提问作者Tan