JavaScriptの配列(Array) sortメソッドの使い方

プログラミング

JavaScriptのArray.sort()について記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。

JavaScriptの配列(Array)とは?

JavaScriptの配列は、異なる要素を格納するために使用される単一の変数です。
要素のリストを格納し、単一の変数でアクセスしたい場合によく使用されています。
配列が複数の変数への参照である他の多くのプログラミング言語とは異なり、JavaScriptでは、配列は複数の要素を格納する単一の変数です。

小難しい説明になりますが、JavaScriptでの配列処理は非常に多くの処理が出来るということです。そして、JavaScriptを使ってコード、システムを作っていくうえで配列処理の基本動作、JSが持っている関数を理解しておくことは非常に重要だと個人に考えています。

開発の現場でも配列処理を正しくそして深く理解していることが求められます。

JSの配列処理はES5,ES6などでアップデートが行われており、本来なら簡潔なコードで記載できるにもかかわらず、冗長なコードで記載してしまったがゆえにバグを発生してしまったり、予期せぬ動作を配列処理が起こしてしまうといったことが起こっていたりもします。

配列処理は頻繁に使用し、そして、もっともバグを生みやすい部分だとも思っているので個人的にJavaScriptで一番重要だと筆者は考えています。

次に本題の説明に移ります。

JavaScriptのArray.sort()概要

Array.sort()は、配列内の要素をソートして並び替えるための関数です。

構文、使い方

Array.sort()は、配列をソートするメソッドです。構文は以下の通りです。

compareFunctionを省略すると、配列の要素が文字列の場合はUnicode順序に、数値の場合は昇順にソートされます。

引数について

Array.sort()の引数は、ソートの順序を定義するための関数です。

関数は2つの引数を受け取り、それらを比較して-1、0、または1を返します。

-1は最初の引数が2番目の引数よりも小さいことを意味し、1は最初の引数が2番目の引数よりも大きいことを意味します。

0は2つの引数が等しいことを意味します。

返り値について

Array.sort()は、与えられた配列をソートして、ソートされた配列を返します。

このメソッドを利用した便利なテクニック

・配列を昇順または降順でソートする: Array.sort()を使用して、配列を昇順または降順でソートすることができます。

例えば、以下のようにします。

現場で実際にどのように使われているか

Array.sort()は、配列内の要素を並べ替えるために使用されます。

例えば、数値を昇順または降順に並べ替えるために使用されることがよくあります。

JavaScriptのArray.sort()と一緒によく使われる処理

Array.map()と一緒に使われることが多いです。

Array.sort()は、配列内の要素をソートしますが、Array.map()を使用すると、ソートされた配列内の要素を変換することができます。

使用する上での注意点

– Array.sort()は元の配列を変更します。
– 比較関数を指定しない場合、文字列をアルファベット順に並び替えます。
– 比較関数を指定した場合、比較関数を使用して配列を並び替えます。

JavaScriptのArray.sort()と似た処理のJSメソッド、違い

Array.reverse()と似ていますが、下記の違いがあります。

  • Array.sort()は配列をソートする。
  • Array.reverse()は配列を反転する。

JavaScriptのArray.sort()を使ったサンプルコードの紹介

Array.sort()を使ったサンプルコード1

 

1, 2, 3, 4, 5

Array.sort()を使ったサンプルコード2

 

[{ name: ‘The’, value: -12 }, { name: ‘Edward’, value: 21 }, { name: ‘Magnetic’, value: 13 }, { name: ‘Sharpe’, value: 37 }, { name: ‘Zeros’, value: 37 }, { name: ‘And’, value: 45 }]

JavaScriptの他のArrayメソッドについて

JavaScriptの配列のメソッドについては、下記記事にもまとめていますので参考にしてみてください

メソッド名 機能 リンク
Array.concat() 既存の配列に新しい配列または値を連結するための関数 JavaScriptの配列(Array)のconcatメソッドの使い方
Array.constructor
配列オブジェクトに定義されているプロパティ JavaScriptの配列(Array)のconstructorプロパティの使い方
Array.copyWithin()
配列内の要素を、同じ配列内の別の位置にコピーする関数 JavaScriptの配列(Array)のcopyWithinメソッドの使い方
Array.entries() 配列内の要素に対応するインデックスと要素のペアを含む新しいイテレータオブジェクトを生成する関数 JavaScriptの配列(Array)のentriesメソッドの使い方
Array.every() 配列内のすべての要素がテスト関数を満たすかどうかを判定する関数 JavaScriptの配列(Array)のeveryメソッドの使い方
Array.fill() 配列内の全てまたは一部の要素を指定の値で埋める関数 JavaScriptの配列(Array)のfillメソッドの使い方
Array.filter() 配列内の要素をテスト関数に基づいてフィルタリングする関数 JavaScriptの配列(Array)のfilterメソッドの使い方
Array.find() 配列内の要素から最初にテスト関数を満たす要素を検索する関数 JavaScriptの配列(Array)のfindメソッドの使い方
Array.findIndex() 配列内の要素から最初にテスト関数を満たす要素のインデックスを検索する関数 JavaScriptの配列(Array)のfindIndexメソッドの使い方
Array.forEach() 配列内のすべての要素に対して処理を実行する関数 JavaScriptの配列(Array)のforEachメソッドの使い方
Array.from() 配列風オブジェクトや反復可能なオブジェクトから新しい配列を生成する関数 JavaScriptの配列(Array)のfromメソッドの使い方
Array.includes() 配列内に特定の要素が含まれているかどうかを判定する関数 JavaScriptの配列(Array)のincludesメソッドの使い方
Array.indexOf() 配列内の指定された要素の最初のインデックスを検索する関数 JavaScriptの配列(Array)のindexOfメソッドの使い方
Array.isArray() 指定されたオブジェクトが配列であるかどうかを判定する関数 JavaScriptの配列(Array)のisArrayメソッドの使い方
Array.join() 配列内の要素を文字列に連結する関数 JavaScriptの配列(Array)のjoinメソッドの使い方
Array.keys() 配列内の要素に対応するインデックスを含む新しいイテレータオブジェクトを生成する関数 JavaScriptの配列(Array)のkeysメソッドの使い方
Array.lastIndexOf()
配列内の指定された要素の最後のインデックスを検索する関数 JavaScriptの配列(Array)のlastIndexOfメソッドの使い方
Array.length 配列内の要素数を表すプロパティ JavaScriptの配列(Array)のlengthプロパティの使い方
Array.map() 配列内のすべての要素に対して関数を適用し、結果を含む新しい配列を生成する関数 JavaScriptの配列(Array)のmapメソッドの使い方
Array.pop() 配列内の最後の要素を取り除き、その要素を返す関数 JavaScriptの配列(Array)のpopメソッドの使い方
Array.prototype 配列オブジェクトのプロトタイプオブジェクト JavaScriptの配列(Array)のprototypeプロパティの使い方
Array.push() 配列内の最後に要素を追加する関数 JavaScriptの配列(Array)のpushメソッドの使い方
Array.reduce() 配列内の要素をシンプルな値(通常は数値)に結合する関数 JavaScriptの配列(Array)のreduceメソッドの使い方
Array.reduceRight()
配列内の要素を右から左に向かって結合する関数 JavaScriptの配列(Array)のreduceRightメソッドの使い方
Array.reverse() 配列内の要素の順番を反転する関数 JavaScriptの配列(Array)のreverseメソッドの使い方
Array.shift() 配列内の最初の要素を取り除き、その要素を返す関数 JavaScriptの配列(Array)のshiftメソッドの使い方
Array.slice() 配列内の一部を切り出して、新しい配列として返す関数 JavaScriptの配列(Array)のsliceメソッドの使い方
Array.some() 配列内の要素のいずれかが特定の条件を満たすかどうかをテストする関数 JavaScriptの配列(Array)のsomeメソッドの使い方
Array.sort() 配列内の要素をソートする関数 JavaScriptの配列(Array)のsortメソッドの使い方
Array.toString() 配列を文字列に変換する関数 JavaScriptの配列(Array)のtoStringメソッドの使い方
Array.unshift() 配列内の最初に要素を追加する関数 JavaScriptの配列(Array)のunshiftメソッドの使い方
Array.valueOf() 配列のプリミティブ値を返却 JavaScriptの配列(Array)のvalueOfメソッドの使い方

また、JavaScriptの公式ドキュメントであるMDNで記載されているsortメソッドについても補足としてリンクを貼っておきます。参考にしてみてください。

Array.prototype.sort() - JavaScript | MDN
sort() は Array のメソッドで、配列の要素をその場 (in-place) でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。
タイトルとURLをコピーしました