JavaScriptでの配列のソートが変わらない問題を解決

最近あるプロジェクトに取り組んでいたのですが、Ajax がバックグラウンドからデータを返した後、フロントエンドが js で処理されると、どうやってもsortを使っても結局何も変わらない、それとも最後のソートだけ変えるか、ずっと悩んだ末にやっと情報を確認したところ、jsには浅いコピーと深いコピーの区別があることが分かりました。

    var provinceConfirmedCount = data;
    var provinceDeadCount = data;
    var provinceCuredCount = data;

    provinceConfirmedCount.sort(sortBy(("provinceConfirmedCount")));
    provinceDeadCount.sort(sortBy(("provinceDeadCount")));
    provinceCuredCount.sort(sortBy(("provinceCuredCount")));

    console.log(provinceConfirmedCount); //不生效
    console.log(provinceDeadCount); //不生效
    console.log(provinceCuredCount); //生效

//比较数组对象
function sortBy(field) {
    return function(a,b) {
        return parseInt(b[field]) - parseInt(a[field]);
    }
}

浅いコピー、深いコピー、割り当て

簡単にするために、これら 3 つの違いはデータの変更方法ではありません。明らかに、テーブルを使用すると、同じオブジェクトを指しているかどうかを最も早く理解できます。

最初のレイヤーは基本データ型です元のデータにはサブオブジェクトが含まれています割り当て 浅いコピー ディープ コピー

はい	元のデータも一緒に変更されます	元のデータも一緒に変更されます
いいえ	元のデータは同時に変更されません	元のデータは同時に変更されます
Yes	No 元のデータを一緒に変更します	元のデータを一緒に変更しません

解決策

原則がわかったので、ここでの要件を完全に変更する必要があります。そのため、JQuery の extend メソッドを使用してそれを処理できます。

    var provinceConfirmedCount = $.extend([], data);
    var provinceDeadCount = $.extend([], data);;
    var provinceCuredCount = $.extend([], data);;

    provinceConfirmedCount.sort(sortBy(("provinceConfirmedCount")));
    provinceDeadCount.sort(sortBy(("provinceDeadCount")));
    provinceCuredCount.sort(sortBy(("provinceCuredCount")));

    console.log(provinceConfirmedCount);
    console.log(provinceDeadCount);
    console.log(provinceCuredCount);

構文: $.extend(target, [object1], [objectN]) このうち、target はターゲットの型で、ここでは配列 [] を使用していますが、{} にすることもでき、次のように処理できます。実際の状況。 次の [object1]、[objectN] から、extend は処理対象の複数のオブジェクトをターゲット タイプのオブジェクトにマージできることがわかります。

推奨チュートリアル: 「

JS チュートリアル

」

以上がJavaScriptでの配列のソートが変わらない問題を解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。