Javascript reverse()在循环中不起作用

Question

我有下面的webservice调用，我正在使用它来填充UI中的下拉菜单。如果我不使用Array的reverse()方法，我会通过Web服务在越来越多的createDate中获得这些记录。所以我决定以以下方式使用它：

$.ajax({
beforeSend: function(request) {
request.setRequestHeader("eppn", emailID+"@abc.com");
},

url: 'http://localhost:8080/Services/getUserByDate?userid=JACK',
type : 'GET',

dataType:'json',
success : function(data) {
console.log("Sept 18 : Testing getUserByDate webservice");  
console.log(data.usersList.reverse());
$.each(data.usersList.reverse(), function (i) { 
$("#userSetList").append('<option><a href="#" >'+data.usersList[i].title+' | '+data.usersList[i].userSetId+' | '+moment(data.usersList[i].createDate).format('MM/DD/YYYY')+'</a></option>');

});
},
error : function(request,error)
{
$.growl.error({title: "Error", message: "Webservice request failed!" });
}
});

并注意到以下内容：

console.log("Sept 18 : Testing getUserByDate webservice");  
console.log(data.usersList.reverse());

上面的代码按预期以相反的格式显示了项目。然而，当我测试以下内容时：

$.each(data.usersList.reverse(), function (i) { 
$("#userSetList").append('<option><a href="#" >'+data.usersList[i].title+' | '+data.usersList[i].userSetId+' | '+moment(data.usersList[i].createDate).format('MM/DD/YYYY')+'</a></option>');
});

它不会在UI下拉菜单中以相反的顺序显示项目。为什么？

Answer 1

reverse在处反转一个数组，然后返回。

在代码中，调用console.log(data.usersList.reverse());时反转then数组，然后在$.each(data.usersList.reverse(), ...中再次反转。由于您将同一个数组反转两次，它将返回到原来的顺序。

相反，您可以调用reverse一次，然后让后续调用直接使用data.userList：

// data.userList is reversed in place
data.usersList.reverse();
console.log(data.userList);
$.each(data.usersList, function (i) { 
$("#userSetList").append('<option><a href="#" >'+data.usersList[i].title+' | '+data.usersList[i].userSetId+' | '+moment(data.usersList[i].createDate).format('MM/DD/YYYY')+'</a></option>');        
});

Answer 2

array.reverse((没有问题。

const
mySelect = document.getElementById('my-select')
, data =
[ { val:'a', lib:'a_lib' }
, { val:'b', lib:'b_lib' }
, { val:'c', lib:'c_lib' }
, { val:'d', lib:'d_lib' }
]

data.reverse().forEach(el=>{ mySelect.add( new Option(el.lib, el.val)) })

<select id="my-select"></select>