JavaScriptのソート配列:ハウツーガイド
JavaScriptのsort()メソッドを使用して配列を並べ替えることができます。 sort()メソッドは、配列を引数として受け取り、その値を昇順で並べ替えます。配列はその場でソートされます。つまり、元の配列が変更されます。新しいアレイは作成されません。
配列を特定の順序で並べ替えることができます。たとえば、ユーザーにアルファベット順に表示する名前のリストがある場合があります。
配列内の要素をどのようにソートするかに応じて、役立つ組み込みのJavaScript関数があります。たとえば、sort()関数を使用して配列をアルファベット順に並べ替えたり、reverse()関数を使用して配列を逆順に並べ替えたり、sort()関数をネストされた関数とともに使用して独自のカスタム並べ替えを作成したりできます。
このチュートリアルでは、sort()とreverse()を使用してJavaScriptで配列の並べ替え関数を実行する方法を説明します。
JavaScriptのsort()メソッド
JavaScriptのsort()メソッドは、配列内の値を読み取り、それらの値を昇順または降順で返します。数字または文字列を含む文字列を並べ替えることができます。
次の構文を検討してください。
const values = [1, 2, 8, 9, 3]; values.sort();
このコードは、「値」リストを並べ替えます。リストはその場でソートされます。つまり、元のリストが変更されます。 sort()はリストの新しいバージョンを作成しません。
sort()メソッドが元の配列を変更し、その順序を変更することに注意してください。元の配列を同じに保ちたい場合は、sort()関数を実行して、その値を新しい変数に格納できます。
参加者の81%は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。
平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。
sort()メソッドの内容を新しい変数に割り当てると、元のリストは引き続き変更されます。
JavaScriptのソート配列の例
JavaScriptで配列をソートするには、組み込みのデフォルトのsort()メソッドを使用します。最も単純な形式では、sort()メソッドは配列をアルファベットの昇順でソートします。動作中のsort()メソッドの例を次に示します。
var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff']; var sorted_students = students.sort(); console.log(sorted_students);
コードは次を返します:
["Alex", "Cathy", "Jeff", "Lincoln"]
配列は昇順で並べ替えられています。 sort()メソッドを使用して、「students」と呼ばれるJavaScript変数を並べ替えます。次に、「students」の値をJavaScriptコンソールに出力します。
JavaScript配列sort():数値配列を並べ替える
sort()メソッドを使用して、数値リストの値を昇順で並べ替えることができます。
昇順で並べ替えたい生徒の成績のリストがあるとします。 sort()メソッドを使用してそれらを並べ替えることができます:
var grades = [67, 75, 62, 78]; grades.sort(); console.log(grades);
コードからの出力は次のとおりです。
[62, 67, 75, 78]
配列は昇順で並べ替えられています。プログラムがsort()操作を開始すると、配列内の要素は値に基づいて並べ替えられます/。
sort()はリストを適切にソートするため、sort()の結果を新しい変数に割り当てる必要はありません。このコードは、新しくソートされた「成績」配列をコンソールに出力します。
オブジェクトのJavaScriptソート配列
sort()メソッドを使用して、オブジェクトの配列をソートできます。たとえば、学生の名前と年齢の両方を格納するJSONオブジェクトの配列があるとします。
このような配列を生徒の年齢で並べ替えるsort()関数の例を次に示します。
var students = [ { name: "Alex", age: 16 }, { name: "Cathy", age: 14 }, { name: "Lincoln", age: 14 }, { name: "Jeff", age: 15 } ]; var sorted_students = students.sort(function(a, b) { return a.age - b.age; }); console.log(sorted_students);
コードは次を返します:
[ { "name": "Cathy", "age": 14}, { "name": "Lincoln", "age": 14}, { "name": "Jeff", "age": 15}, { "name": "Alex", "age": 16} ]
私たちのコードは、学生の年齢順にJSONオブジェクトの配列を返しました。
最初の行で、4人の学生で「students」変数を宣言します。次に、年齢を比較することにより、各JSONオブジェクトの「年齢」値に基づいて学生変数を並べ替える関数を作成します。最後に、私たちのプログラムは、ソートされた学生のリストを印刷します。
JavaScript配列sort():逆順で並べ替え
配列を逆の順序で並べ替えることができる組み込みのJavaScript関数reverse()もあります。
reverse()メソッドは、最初の要素が最後になり、最後の要素が最初になるように配列を反転します。したがって、この配列は配列をアルファベットの降順では並べ替えません。
最初にsort()メソッドを使用してリストを並べ替えると、reverse()を使用して配列を降順で表示できます。
動作中のreverse()関数の例を次に示します。
var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff']; var reversed_students = students.reverse(); console.log(reversed_students);
コードは次を返します:
[“Jeff”, “Lincoln”, “Cathy”, “Alex”]
まず、sort()を使用してリストを昇順で並べ替えます。次に、reverse()を使用してリストを逆にします。リストに名前がアルファベット順に表示されるようになりました。
sort()関数と同様に、reverse()関数は、リストの順序を変更します。元の配列を変更せずに、reverse()の結果を新しい変数に割り当てることはできません。これについては、以前にsort()メソッドで説明しました。
結論
JavaScriptのsort()メソッドは、リストの内容を昇順または降順で並べ替えます。 sort()は、その場でリストを変更します。これは、メソッドが新しいリストを作成しないことを意味します。 reverse()は、sort()の後に使用すると、リストを降順で並べ替えます。
このチュートリアルでは、sort()を使用してJavaScriptで配列を並べ替える方法を説明しました。数値配列の並べ替え、オブジェクトの配列の並べ替え方法、reverse()を使用した配列の内容の反転について説明しました。
JavaScriptの主要な学習リソースとオンラインコースに関するアドバイスについては、JavaScriptの学習方法に関する記事をご覧ください。
-
JavaScriptのArray.prototype.sort()。
JavaScript Array.prototype.sort()メソッドは、配列の並べ替えに使用されます。並べ替えの順序は、アルファベット、数字、昇順、降順のいずれかです。 以下は、Array.prototype.sort()メソッドのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-
-
JavaScriptで配列のインデックスで並べ替える
次のオブジェクトの配列があるとします- const arr = [ { 'name' : 'd', 'index' : 3 }, { 'name' : 'c', 'index' : 2 }, {