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。让我们看一张图片：

我最后查了一下，reverse 应该把数组的顺序颠倒了。然而事实并非如此。

我Using this wrong (official MDN Docs)吗？为什么反向不起作用？

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 括号内的所有内容首先被评估。尝试 2 个反转，你能猜到会发生什么吗，它会回到原来的顺序，就像你的例子一样。

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

Answer 2

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

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

如果您的对象数组中有一个可排序的属性，'sort' 将在将一个项目推入 items

后进行重新排列

说，

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
});

Answer 5

reverse is destructive -- it changes the original array.

MDN Docs Array Reverse

例子-

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]

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

Array Reverse is not working for me ...

javascript

arrays

reverse

array-reverse