JavaScript 配列 sort() メソッドの基本的な使い方と落とし穴

序文

日常のコード開発では、配列のソートに関連する操作が多数あります。JavaScript では、sort メソッドを呼び出して配列をすばやくソートできます。

今日は、将来落とし穴に陥るという悲惨な経験を避けるために、配列のソート方法について学びましょう。

コンセプト

sort メソッドは、配列の要素を並べ替えるために使用されます。

文法

arr.sort([比較関数])

パラメータ解析

compareFunction (オプション)

特定の配置順序を指定するために使用される関数。この関数は 2 つのパラメータを取ります。

• firstEl 比較する最初の要素
• secondEl 比較する2番目の要素

この関数を省略すると、要素は変換された文字列内の文字の Unicode 位置に従ってソートされます。

戻り値

ソートされた配列。

配列はインプレースでソートされ、コピーは作成されないことに注意してください。

ソートメソッドのソースコード

メソッドの定義(
  GlobalArray.プロトタイプ、
  ソート(比較) {
    CHECK_OBJECT_COERCIBLE(this、"Array.prototype.sort");

    比較条件が未定義で、比較条件が呼び出し可能の場合
      %make_type_error(kBadSortComparisonFunction, comparefn) をスローします。
    }

    var 配列 = TO_OBJECT(これ);
    var length = TO_LENGTH(配列.length);
    InnerArraySort(配列、長さ、比較fn)を返します。
  }
);

このステップでは、sort メソッドが InnerArraySort メソッドを呼び出し、パラメーターが配列、配列の長さ、および比較関数であることを示します。 InnerArraySort メソッドがこれをどのように処理するかを見てみましょう。

ピット

配列のソートを初めて使用したときのことを今でも覚えています。ソート方法を見つけてすぐに使用しました。結果は次のようになりました。

定数arr = [49, 5, 14, 89, 71, 3, 10];
ソート
// 出力 [10, 14, 3, 49, 5, 71, 89]

結果を見た瞬間、少しショックを受けました。

これは少し非倫理的です。合意された順序はどこにありますか?自分のマシンに問題がないことを確認した後、すぐにドキュメントをチェックして、何が書いてあるか確認しました。

compareFunction が指定されていない場合、要素は変換された文字列の文字ごとの Unicode 位置に従ってソートされます。

この説明により、上記の配列のソートは次のように理解できます。

まず、配列内の数字を1つずつ文字列に変換し、['49'、'5'、'14'、'89'、'71'、'3'、'10']を取得します。

最初の文字の Unicode 位置に従って計算すると、次のようになります。

• 1 は 3 より前にエンコードされるため、10 と 14 は 3 より前にランク付けされます。
• 3 は 4 の前にエンコードされるため、49 は 3 の後に来ます...

最初の文字のコードが同じ場合は、2 番目の文字のコードが比較されます。たとえば、10 は 14 (0 と 4 の比較結果) よりも前に来ます。

ロジックは理にかなっているように思えますが、これは私が望んでいる結果ではありません。やはり比較関数 compareFunction に頼らなければならないようです。この compareFunction が何であるかを見てみましょう。

使用法

基本的な使用例は次のとおりです。

定数arr = [49, 5, 14, 89, 71, 3, 10];

// 一般的な書き方 arr.sort(function (a, b) {
    return a - b; // 昇順でソート });

// 矢印関数 arr.sort((a, b) => a - b);

// 結果 [3, 5, 10, 14, 49, 71, 89]

上記は昇順で並べ替える方法です。降順で並べ替えたい場合は、比較関数の return a - b; を return b - a; に変更するだけです。

オブジェクトの配列をソートする

数値配列と文字配列のソートに加えて、sort() メソッドを使用してオブジェクト配列をソートすることもできます。

var アイテム = [
    {名前: 'エドワード'、値: 21}、
    {名前: 'シャープ'、値: 37}、
    {名前: 'そして', 値: 45},
    {名前: 'The'、値: -12}、
    {名前: 'マグネティック'},
    {名前: 'ゼロ'、値: 37}
];

// 値でソート
アイテム.sort(関数(a, b) {
    （a.値 - b.値）を返す
});

// 名前で並べ替え
アイテム.sort(関数(a, b) {
    var nameA = a.name.toUpperCase(); // 大文字と小文字を無視する
    var nameB = b.name.toUpperCase(); // 大文字と小文字を無視する
    (名前A < 名前B) の場合 {
        -1 を返します。
    }
    (名前A > 名前B) の場合 {
        1 を返します。
    }

    // 名前は同じである必要があります
    0を返します。
});

非ASCII文字のソート

非 ASCII 文字を含む文字列 (e、é、è、a、ä などの文字を含む文字列など) を並べ替える場合。英語以外の言語の文字列では、

var items = ['reservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
アイテム.sort(関数(a, b) {
	a.localeCompare(b) を返します。
});

// items は ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] です

マッピングを使用してソートを改善する

compareFunction では、ソートを実行するために要素を複数回マップする必要がある場合があります。特に compareFunction が複雑で要素が多い場合、一部の compareFunction で高い負荷が発生する可能性があります。並べ替えを補助するために地図を使用することをお勧めします。基本的な考え方は、まず配列内の各要素の実際の値を取り出し、それをソートしてから、配列を復元することです。

// ソートする配列 var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];

// ソートする必要がある数字と位置の一時的な保存場所 var maps = list.map(function(el, i) {
  	戻り値: { インデックス: i、値: el.toLowerCase() };
})

// 配列を複数の値でソートする ​​mapped.sort(function(a, b) {
  	+(a.value > b.value) || +(a.value === b.value) - 1 を返します。
});

// インデックスに従ってソートされた結果を取得します var result = maps.map(function(el){
  	リスト[el.index]を返します。
});

要約する

これで、JavaScript の配列 sort() メソッドの基本的な使い方についての説明は終了です。JavaScript の配列 sort() メソッドの使い方の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。