javascript - Array Reverse is not working for me ...

Question

Consider the following code (React JS code):

  poll() {
    var self   = this;
    var url    = "//" + location.hostname + "/api/v1/eve/history/historical-data/" + this.state.itemId + '/' + this.state.regionId + '/40';

    $.get(url, function(result) {
      console.log(result.data, result.data.reverse());
      self.setState({
        error:          null,
        historicalData: result.data.reverse(),
        isLoading: false
      });
    }).fail(function(response) {
      self.setState({
        error: 'Could not fetch average price data. Looks like something went wrong.',
      });
    });
  }

Notice the console.log. Lets see an image:

Last I checked, reverse should have reversed the order of the array. Yet it doesn't.

Am I Using this wrong (official MDN Docs)? Why isn't reverse working?

score 17 · Accepted Answer

它已经反转它，reverse()在console.log(). 它首先对实际数组进行变异，返回一个引用，因此当它被记录时，它a也会被反转。

var a = [1,2,3,4];
console.log(a, a.reverse());
// [4, 3, 2, 1] [4, 3, 2, 1]

console.log首先评估括号内的所有内容。尝试 2 次反转，你能猜到会发生什么，它会回到原来的顺序，就像你的例子一样。

var a = [1,2,3,4]
console.log(a, a.reverse());
// [4, 3, 2, 1]

score 5 · Accepted Answer

问题的根源在于您不了解浏览器控制台的工作原理。

许多浏览器都有控制台，当您在控制台中展开对象或打开控制台时，即使对象在console.log()被调用后发生更改，它们也会以它们所处的状态显示对象。所以如果你这样做：

console.log(result.data);
result.data.reverse();
console.log(result.data);

您将看到两次相同的输出。第二行将数组反转到位，因此两个日志输出都显示相同的数组，处于当前状态。

要演示此控制台行为，您可以执行以下操作：

var b = { a: [1, 2, 3] };
console.log(b);
b.a[1] = 9;
console.log(b);

您将看到的b.a是[1, 9, 3]在两个控制台输出中。

score 5 · Accepted Answer

如https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse所述，reverse()反转原地数组的顺序，因此数组在被调用后反转。你调用它两次，导致数组恢复到原来的顺序。尝试这个：

poll() {
    var self   = this;
    var url    = "//" + location.hostname + "/api/v1/eve/history/historical-data/" + this.state.itemId + '/' + this.state.regionId + '/40';

    $.get(url, function(result) {
        result.data.reverse();
        console.log(result.data, result);
        self.setState({
            error:          null,
            historicalData: result,
            isLoading: false
        });
    }).fail(function(response) {
        self.setState({
            error: 'Could not fetch average price data. Looks like something went wrong.',
    });
}

score 1 · Accepted Answer

reverse 是破坏性的——它改变了原始数组。

MDN Docs 数组反向

例子 -

let a = [1,2,3,4]
console.log(a, a.reverse()) // [4,3,2,1],[4,3,2,1]

它首先对实际数组进行变异，返回一个引用

解决方案

let a = [1,2,3,4]
let reverseArray = [...a].reverse()
console.log(a, reverseArray) // [1,2,3,4], [4,3,2,1]

score 0 · Accepted Answer

如果您的对象数组中有可排序的属性，则“排序”将在将项目推入项目后进行重新排列

说，

let items = [{id: 1, color: 'blue'}, {id: 2, color: 'red'}];
let item = {id: 10, color: 'green'};
items.push(item);

items.sort((a, b)=>{
    return b.id - a.id  //this will sort according to .id descending
});

javascript - Array Reverse is not working for me ...

5 回答 5

Related

Reference