web-dev-qa-db-ja.com

Array Reverseが機能しません...

次のコード(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に注目してください。画像を見てみましょう:

enter image description here

最後にチェックしたところ、reverseは配列の順序を逆にしているはずです。しかし、そうではありません。

私は これを間違って使用しています(公式MDNドキュメント) ?なぜ逆動作しないのですか?

12
TheWebs

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse で説明されているように、reverse()は配列がインプレイスなので、呼び出された後に配列が逆になります。これを2回呼び出すと、配列が元の順序に復元されます。これを試して:

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

それは逆になり、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(), a.reverse());
// [1, 2, 3, 4] [1, 2, 3, 4] [1, 2, 3, 4]
11
Matt Harrison

問題の原因は、ブラウザのコンソールがどのように機能するかを理解していないことです。

多くのブラウザーには、console.log()が呼び出された後で変更された場合でも、コンソールでオブジェクトを展開したとき、またはコンソールを開いたときの状態でオブジェクトを表示するコンソールがあります。だからあなたがするなら:

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

同じ出力が2回表示されます。 2行目は、配列インプレースを反転させているため、両方のログ出力に現在の状態の同じ配列が表示されています。

このコンソールの動作を示すために、以下を実行できます。

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

あなたが見るものはそれですb.a[1, 9, 3]両方のコンソール出力。

2
JLRishe

オブジェクトの配列内に並べ替え可能なプロパティがある場合、 '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
});
0
Joseph Ocampo