JavaScriptのsortメソッドを使って並べ替える方法

青灯夜游
リリース: 2023-01-07 11:43:57
オリジナル
12738 人が閲覧しました

JavaScript では、sort メソッドを使用して、配列要素を特定の条件に従って並べ替えます。パラメーターを渡さずに sort() メソッドを呼び出した場合、配列内の要素はアルファベット順にソートされ、関数パラメーターが指定された場合、配列内の要素は関数によって指定された順序に従ってソートされます。

JavaScriptのsortメソッドを使って並べ替える方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

sort() メソッドは、特定の条件に従って配列要素を並べ替えることができます。 sort() メソッドが引数なしで呼び出された場合、配列内の要素はアルファベット順に並べ替えられます。

var a = ["a","e","d","b","c"];  //定义数组
a.sort();  //按字母顺序对元素进行排序
console.log(a);  //返回数组[a,b,c,d,e]
ログイン後にコピー

sort() メソッドを使用する場合は、次の問題に注意する必要があります。

1) いわゆるアルファベット順は、実際には文字コード表の文字の順序に従って配置されており、各文字には文字表内で固有の番号が割り当てられています。

2) 要素が文字列でない場合、sort() メソッドは比較のために配列要素を文字列に変換しようとします。

3) sort() メソッドは、文字列の数に基づいて並べ替えるのではなく、要素の値に基づいてビットごとの比較を実行します。

var a = ["aba","baa","aab"];  定义数组
a.sort();  //按字母顺序对元素进行排序
console.log(a);  //返回数组[aab,aba,baa]
ログイン後にコピー

ソートする場合は、まず各要素の最初の文字を比較し、最初の文字が同じ場合は 2 番目の文字を比較し、以下同様に続きます。

4) いずれの場合も、配列内の未定義の要素は最後にソートされます。

5) sort() メソッドは、元の配列に対して並べ替え操作を実行し、新しい配列を作成しません。

sort() メソッドは、アルファベット順に並べ替えるだけでなく、他の順序に従って操作を実行することもできます。この場合、メソッドには 2 つの値を比較し、2 つの値の相対的な順序を表す数値を返す関数パラメータを指定する必要があります。 sort 関数には a と b の 2 つのパラメータが必要で、その戻り値は次のとおりです。

  • カスタム基準に従って a が b より小さい場合、並べ替えられた配列では a が b より前に表示される必要があり、0 より小さい値が返されます。

  • a が b に等しい場合、0 を返します。

  • a が b より大きい場合、0 より大きい値を返します。

例 1

次の例では、配列内の各要素のサイズがソート関数に従って比較され、ソートされます。小から大へ 順番に並べ替えが行われます。

function f(a,b) {  //排序函数
    return (a - b);  //返回比较参数
}
var a = [3,1,2,4,5,7,6,8,0,9];  //定义数组
a.sort(f);  //根据数字大小由小到大进行排序
console.log(a);  //返回数组[0,1,2,3,4,5,6,4,7,8,9]
ログイン後にコピー

大きい順に実行した場合は戻り値を反転するだけです。コードは次のとおりです。

function f(a,b) {  //排序函数
    return -(a - b);  //取反并返回比较参数
}
var a = [3,1,2,4,5,7,6,8,0,9];  //定义数组
a.sort(f);  //根据数字大小由小到大进行排序
console.log(a);  //返回数组[9,8,7,6,5,4,3,2,1,0]
ログイン後にコピー

例 2

奇数プロパティと偶数プロパティに従って配列を配置します。

sort() は、主に関数の並べ替えと比較に使用するため、より柔軟に使用できます。たとえば、奇数と偶数に従って配列を並べ替える場合、シーケンス関数の 2 つのパラメーターが奇数か偶数かを判断し、並べ替え順序を決定するだけで済みます。

function f(a, b) {  //排序函数
    var a = a % 2;  //获取参数a的奇偶性
    var b = b % 2;  //获取参数b的奇偶性
    if (a == 0) return 1;  //如果参数a为偶数,则排在左边
    if (b == 0) return -1;  //如果参数b为偶数,则排在右边
}
var a = [3,1,2,4,5,7,6,8,0,9];  //定义数组
a.sort(f);  //根据数字大小由大到小进行排序
console.log(a);  //返回数组[3,1,5,7,9,0,8,6,4,2]
ログイン後にコピー

sort() メソッドは、ソート関数を呼び出すときに、各要素の値をソート関数に渡します。要素の値が偶数の場合、その位置は変更されません。要素の値が奇数の場合、パラメータ a と b の表示順序が交換され、それによって配列内のすべての要素の奇数偶数の並べ替えが実行されます。偶数を最初にソートし、奇数を後にソートする場合は、戻り値を取得するだけで済みます。ソート機能は以下の通りです。

function f(a, b) {
    var a = a % 2;
    var b = b % 2;
    if (a == 0) return -1;
    if (b == 0) return 1;
}
ログイン後にコピー

例 3

文字列を大文字と小文字を区別せずに並べ替えます。

通常の状況では、文字エンコード テーブル内の大文字と小文字の順序が異なり、大文字の方が小文字よりも大きいため、文字列の並べ替えでは大文字と小文字が区別されます。

var a = ["aB", "Ab", "Ba", "bA"];  //定义数组
a.sort();  //默认方法排序
console.log(a);  //返回数组["Ab", "Ba", "aB", "bA"]
ログイン後にコピー

大文字は常に左側に配置されますが、小文字が常に左側に配置されるようにしたい場合は、次のように設計できます:

function f(a ,b) {
    return (a < b);
}
var a = ["aB", "Ab", "Ba", "bA"];  //定义数组
a.sort();  //默认方法排序
console.log(a);  //返回数组["Ab", "Ba", "aB", "bA"]
ログイン後にコピー

文字の大きさを比較する場合、JavaScript文字エンコーディングのサイズに基づいて決定され、trueの場合は1を返し、falseの場合は-1を返します。

大文字と小文字を区別せず、大文字と小文字を同じ順序で配置する場合は、次のように設計できます。

function f(a, b) {
    var a = a.toLowerCase;
    var b = b.toLowerCase; 
    if (a < b) {
        return 1;
    }
    else {
        return -1;
    }
}
var a = ["aB", "Ab", "Ba", "bA"];  //定义数组
a.sort();  //默认方法排序
console.log(a);  //返回数组["aB", "Ab", "Ba", "bA"]
ログイン後にコピー

並べ替え順序を調整したい場合は、戻り値を反転するように設定するだけです。

例 4

浮動小数点数と整数を別々に表示します。

function f(a, b) {  //排序函数
    if (a > Math.floor(a)) return 1;  //如果a是浮点数,则调换位置
    if (b > Math.floor(b)) return -1;  //如果b是浮点数,则调换位置
}
var a = [3.5555, 1.23456, 3, 2.11111, 5, 7, 3];  //定义数组
a.sort(f);  //进行筛选
console.log(a);  //返回数组[3,5,7,3,2.11111,1.23456,3.55555]
ログイン後にコピー

ソート順を調整したい場合は、戻り値を反転するように設定するだけです。

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptのsortメソッドを使って並べ替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート