意外と知らないJavaScriptのsortメソッド

日々のビジネス開発において、配列(Array)は頻繁に使用するデータ型であるため、配列をソートすることも非常に一般的です。データは、JS 配列のネイティブ メソッド sort を使用して配置されます (はい、私はネイティブ JS の機能を好みます)。

[推奨コース: JavaScript ビデオ チュートリアル ]

1. たとえば、

は配列内で直接使用できます。並べ替えメソッドは、reverse() および sort() です。 reverse() メソッドは十分な柔軟性がないため、sort() メソッドが導入されています。デフォルトでは、sort() メソッドは配列を昇順にソートします。

var arr=[1,3,5,9,4];
console.log(arr.sort());
// 输出: [1, 3, 4, 5, 9]

この時点ではデータが小さいものから大きいものまで並んでいて問題なかったので、配列を var arr=[101,1,3,5,9,4,11 に変更しました。 ]; を実行し、sort() メソッドを呼び出してソート結果を出力します。

var arr=[101,1,3,5,9,4,11];
console.log(arr.sort());
// 输出: [1, 101, 11, 3, 4, 5, 9]

この時点で、配列 101 と 11 はすべて 3 より前にランクされていることがわかりました。これは、sort() メソッドが次の toString() 変換メソッドを呼び出すためです。ソート方法 配列内の各項目が数値であっても、sort() メソッドは文字列を比較します。

それでは、文字列はどのようにソートされるのでしょうか? 文字列は、文字列の Unicode エンコードに従って小さいものから大きいものへとソートされます。次に、配列内の各項目の Unicode エンコーディングを出力して確認してみます。

...
// 转码方法
function getUnicode (charCode) {
    return charCode.charCodeAt(0).toString(16);
}
// 打印转码
arr.forEach((n)=>{
  console.log(getUnicode(String(n)))
});
// 输出: 31 31 31 33 34 35 39

文字列 1,101,11 の Unicode エンコーディングがすべて 31

#2 であることに驚きました。指定された順序で比較関数を渡します

以降 sort() メソッドが希望する順序でソートされていないことが判明しましたが、どのように解決すればよいでしょうか? sort() メソッドは比較関数をパラメータとして受け取り、どちらの値が前にあるかを指定できます。どの値の。

比較関数 (compare) は 2 つのパラメータを受け取ります。最初のパラメータが 2 番目のパラメータより前にある場合は、負の数を返します。2 つのパラメータが等しい場合は、0 を返します。最初のパラメータが 2 番目のパラメータより後である場合は、0 を返します。 2 番目のパラメータを指定すると、整数が返されます。

function compare(value1,value2){
  if (value1 < value2){
    return -1;
  } else if (value1 > value2){
    return 1;
  } else{
    return 0;
  }
}

sort()メソッドに比較関数を渡し、arr配列を並べると以下のような出力結果が得られます。小さいものから大きいものまで仕分けします。

3. オブジェクト配列の並べ替え

sort() メソッドは比較関数を渡すことで数値配列を並べ替えますが、開発ではオブジェクト配列を並べ替えます。 IDや年齢などの特定の属性でソートされるのですが、どうすれば解決できますか?

この問題を解決するには、関数を定義して属性名を受け取り、この属性名に基づいて比較関数を作成し、それを戻り値として返すことができます (JS の関数は次のように使用できます)。値, パラメーターのように関数を別の関数に渡すだけでなく、別の関数の結果として関数を返すこともできます。関数が JS の第一級市民であるのには理由があります。実際、非常に柔軟です。 )、コードは次のとおりです。

var arr=[101,1,3,5,9,4,11];
console.log(arr.sort(compare));
// 输出: [1, 3, 4, 5, 9, 11, 101];

配列ユーザーを定義し、sort() メソッドを呼び出し、compareFunc(prop) を渡して出力結果を出力します。

function compareFunc(prop){
  return function (obj1,obj2){
    var value1=obj1[prop];
    var value2=obj2[prop];
    if (value1 < value2){
        return -1;
    } else if (value1 > value2){
        return 1;
    } else{
        return 0;
    }
  }
}

デフォルトでは、sort() メソッドが呼び出されると、比較関数を渡すと、sort() メソッドは各オブジェクトの toString() メソッドを呼び出して順序を決定します。compareFunc('age') メソッドを呼び出して比較関数を作成すると、並べ替えはオブジェクトの age 属性。

4. XML ノードの並べ替え

バックグラウンドで返されるデータの多くは JSON 形式になっていますが、非常に軽量で解析が簡単です。ただし、バックグラウンドから返されたデータはすべて XML 文字列だったので、以前のプロジェクトがありました。フロントエンドがデータを取得した後、シリアル化する必要があり、一部を並べ替える必要がありました。以前の並べ替えは、XML を配列に変換することでしたソート用のオブジェクトを追加するのは問題ありませんが、コードが非常に冗長で面倒な気がします。後になってふと思ったのですが、取得したxmlも配列っぽいオブジェクトだったのですが、配列っぽいオブジェクトを配列に変換すれば直接ソートできるのではないか？

var users=[
    {name:'tom',age:18},
    {name:'lucy',age:24},
    {name:'jhon',age:17},
];
console.log(users.sort(compareFunc('age')));
// 输出结果
[{name: "jhon", age: 17},
{name: "tom", age: 18},
{name: "lucy", age: 24}]

ソート結果の出力

XML ノードが、経過時間に応じて小さいものから大きいものへとソートされていることがわかります。

5. 概要

JS 配列の並べ替えメソッドでは、受信比較関数により並べ替えがより柔軟になります。また、時間に従って並べ替えることもできます。中国語のピンインの最初の文字など、比較関数に渡して 2 つのオブジェクトの属性値を明示的に比較し、属性値を比較してオブジェクトの並べ替え順序を決定することを覚えておく必要があります。 。また、仕事上で問題に遭遇し、それを解決するための新しいアイデアを見つけました。これは簡単にまとめたものです。不足している点があれば、修正してください。

参考資料:

「JavaScript 上級チュートリアル」

この記事は

js チュートリアル

列からのものです。ぜひ学習してください。

以上が意外と知らないJavaScriptのsortメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。