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

最后我检查过，反向应该颠倒了数组的顺序。但它没有。

我是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 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

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

许多浏览器都有控制台，当您在控制台中展开对象或打开控制台时，即使它们在调用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 3

正如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 4

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

说

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具有破坏性-它将更改原始数组。

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]
console.log(a, reverseArray) // [1,2,3,4], [4,3,2,1]

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

5 个答案: