今回の記事は、
- Javascriptを使って配列内の要素をソートしたい
- 配列内の要素を昇順/降順でソートしたい
という方に向けた記事になっています。
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
Javascriptを使って配列をソートする方法
Javascriptで配列をソートするには、その名の通り、sort()メソッドを使用します。
sort()メソッドは基本的には引数に比較関数を取り、その比較関数で定義した方法を元に配列内の要素をソートしてくれます。
基本的な使い方
配列.sort(比較関数)
比較関数の使い方
この比較関数は以下のように2種類の引数を取り、関数内に定義したルールを元に配列をソートしていってくれます。
比較関数の使い方
function compare(prev, next) {
return prev - next
}
また、ES6より導入されたアロー関数を用いると、より簡潔に記載できます。
アロー関数を用いた方法
(prev, next) => prev - next
本記事では後者のアロー関数を使用させて頂きます。
sort()メソッドを使って数値を昇順/降順にソートする方法
それでは早速、sort()メソッドを使って数値を昇順/降順にソートする方法を見ていきましょう。
数値を昇順にソートする方法
実装コード
const numberArray = [3, 13, 4, 1, 8, 20, 9]
numberArray.sort((prev, next) => prev - next)
console.log(numberArray)
出力結果
[1, 3, 4, 8, 9, 13, 20]
数値を降順にソートする方法
先ほどの例は数値を昇順にソートするコードになりますが、降順にソートする場合には prev
とnext
を入れ替えてあげれば大丈夫です。
実装コード
const numberArray = [3, 13, 4, 1, 8, 20, 9]
numberArray.sort((prev, next) => next - prev)
console.log(numberArray)
出力結果
[20, 13, 9, 8, 4, 3, 1]
sort()メソッドを使って文字列を昇順/降順にソートする方法
続いてはsort()メソッドを使って文字列を昇順/降順にソートする方法を見ていきましょう。
文字列をソートする場合は-
ではなく、不等号を使って実装します。
実装コード
const languageArray = ["ruby", "php", "javascript", "vue.js", "html"]
// 昇順の場合
const languageArraySortedByAsc = languageArray.sort((prev, next) => prev < next ? -1 : 1)
console.log(languageArraySortedByAsc)
// 降順の場合
const languageArraySortedByDesc = languageArray.sort((prev, next) => next < prev ? -1 : 1)
console.log(languageArraySortedByDesc)
出力結果
// 昇順の場合
["html", "javascript", "php", "ruby", "vue.js"]
// 降順の場合
["vue.js", "ruby", "php", "javascript", "html"]
なお、文字列をソートする場合に限っては、引数を省略することも可能であり、その場合には昇順でソートされます。
実装コード
const languageArray = ["ruby", "php", "javascript", "vue.js", "html"]
const languageArraySortedByAsc = languageArray.sort()
console.log(languageArraySortedByAsc)
出力結果
["html", "javascript", "php", "ruby", "vue.js"]
単純に昇順でソートする場合にはこちらの方がはるかに楽に実装できますので、こちらもぜひ覚えておいてくださいね。
sort()メソッドを使って文字列の長さを基にを昇順/降順にソートする方法
続いては、sort()メソッドを使って文字列の長さを基にを昇順/降順にソートする方法を見ていきましょう。
こちらは数値のソートと少し似ていて、length()メソッドを使用して文字列の長さを取得し、その情報を基にソートしていきます。
実装コード
const languageArray = ["ruby", "php", "javascript", "vue.js", "html"]
// 昇順の場合
const languageArraySortedByAsc = languageArray.sort((prev, next) => prev.length - next.length)
console.log(languageArraySortedByAsc)
// 降順の場合
const languageArraySortedByDesc = languageArray.sort((prev, next) => next.length - prev.length)
console.log(languageArraySortedByDesc)
出力結果
// 昇順の場合
["php", "ruby", "html", "vue.js", "javascript"]
// 降順の場合
["javascript", "vue.js", "ruby", "html", "php"]
sort()メソッドを使用する際の注意点
さて、ここまでsort()メソッドを使って様々な要素をソートしてきましたが、その使用に際しては一つだけ注意点があります。
それは、「sort()メソッドは破壊的メソッドである」ということです。
つまり、sort()メソッドを使用すると、元々の配列をもソート後のものに変更してしまうということです。
そのため、元々の配列を変更したくない場合には、slice()メソッドやfrom()メソッド、或いはスプレッド構文([...array]
)を使って配列を複製し、それを新たな変数に代入した上でsort()メソッドを使用するようにしましょう。
その点だけご注意いただき、あとはどんどん積極的にsort()メソッドを使ってみてください。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌?
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】
MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまで、Javascriptを使って配列をソート(並び替え)する方法について解説してきましたがいかがでしたか?
アロー関数が登場してからは比較関数の書き方もかなりシンプルになり、ソート機能の実装ハードルもかなり下がってきています。
このソート機能は実際の開発でも様々な場面で活用できますので、ぜひこの機会にマスターしておいてくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。