次のコード(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は配列の順序を逆にしているはずです。しかし、そうではありません。
私は これを間違って使用しています(公式MDNドキュメント) ?なぜ逆動作しないのですか?
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.',
});
}
それは逆になり、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]
問題の原因は、ブラウザのコンソールがどのように機能するかを理解していないことです。
多くのブラウザーには、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]
両方のコンソール出力。
オブジェクトの配列内に並べ替え可能なプロパティがある場合、 '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
});