Array Reverse对我不起作用......

Question

考虑以下代码(React JS代码):

  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.',
      });
    });
  }

注意console.log.让我们看一个图像:

最后我检查了,反向应该颠倒了数组的顺序.但事实并非如此.

我使用这个错误(官方MDN文档)？为什么不反向工作？

Answer 1

它颠倒了它,在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首先评估parens 内的所有内容.尝试2次反转,你能猜出会发生什么,它会回到原始顺序,就像在你的例子中一样.

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

Answer 2

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

MDN 文档 数组反转

例子 -

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]

Answer 3

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

许多浏览器都有控制台，这些控制台会以您在控制台中展开对象或打开控制台时的状态显示对象，即使它们在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]两个控制台输出中看到。

Answer 4

截至描述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.',
    });
}