kakureblog

未経験からエンジニアになれた経験、エンジニア転職のヒントやプログラミングのTipsを届けます🤟

JavaScript

【5分で理解⑥ (配列編)】JavaScriptの配列のsortメソッド で配列内を並び替え

投稿日:

こんにちは。
大阪でフロントエンド兼マネージャー兼Webチームの採用担当をしている筆者です🙋‍♂️

配列はJavaScript(以下JS)を理解する上では必須の項目です。
JavaScriptの配列で使うメソッド多くあります。

そんなメソッドの中でも最も重要な7つをシリーズで紹介しています。

第6弾の今回はsortメソッドを紹介します。

ちなみに前回の記事はこちらから!
【5分で理解⑤ (配列編)】JavaScriptの配列のeveryメソッド ーsomeメソッドとの違いー


sort()の基本文法

const people = [John, Ben, Adam, Eric, Zack];

const sortGrammer = people.sort()
console.log(sortGrammer) //👉 [Adam, Ben, Eric, John, Zack]

実施結果は、
[Adam, Ben, Eric, John, Zack] とアルファベット順になって返ってきます。

次は数字の並び替えを見てみましょう。

const scores = [20, -110, 70, 120, -990, -30];

const sortGrammer2 = scores.sort()
console.log(sortGrammer) //👉 [-110, -30, -990, 120, 20, 70]

実施結果は、
[-110, -30, -990, 120, 20, 70] となりました。

小→大の並んでいませんね。
理由はsortメソッドは数値ベース(Number)ではなく文字ベース(String)で順番を比較しているからです。

少し工夫をすると数字も綺麗に並び替えることができるので心配ありません。
続きを見ていきましょう!


sort()は何をしてくれる?

sortメソッドは配列を並び替えができるメソッドです。
文字だけでなく、数字やオブジェクトのキーを対象にして並び替えることができます。

では数字の並び替えをsortメソッドでやっていきましょう。
先ほどはうまくソートができませんでしたね。😅
数字の並び替えをするには引数に比較関係を作るのです。

どういうこと?🤔

下のコードを見てください。

const scores = [20, -110, 70, 120, -990, -30];

const sortTest = scores.sort((a, b) => {
  if (a > b) return 1;
  if (b > a) return -1;
});
console.log(sortTest) //👉 [-990, -110, -30, 20, 70, 120]

実行すると、
[-990, -110, -30, 20, 70, 120] となり昇順に並び替えられています。

では解説していきます。

まず引数のa,bのふたつですが、
「a」は現在の数字、「b」は次の数字を指します。

これをif文で比較させて、1もしくは-1で返させます。
ここでsortメソッド本来の機能である、「0よりも小さかったらa→bに並び替えられ、0よりも大きかったらb→aと並び替えられる」で順番を入れ替えられます。

今回の例で言うと、
まずaが20、bが-110が入ります。
a>bなので1が返ってきて順番はb→aと入れ替わり、「-110, 20」となります。

この動作が繰り返し行なわれ、並び替えられた配列 [-990, -110, -30, 20, 70, 120] が完成されます。

さらに、このコードはもっとシンプルに書くことができます。

const sortTest = scores.sort((a, b) => {
  if (a > b) return 1;
  if (b > a) return -1;
});

↓↓↓↓↓↓↓リファクタリング↓↓↓↓↓↓↓

const sortTest = scores.sort((a, b) => a - b);

少しですが、見やすくなりましたね!
これは覚えておいた方が良さそうです。

ちなみに先ほどは小さい数字→大きい数字へと並び替えましたが、大きい数字→小さい数字に並び替えることも可能です。

const scores = [20, -110, 70, 120, -990, -30];
const sortTest = scores.sort((a, b) => b - a);
console.log(sortTest) //👉 [120, 70, 20, -30, -110, -990]

b と aを入れ替えるだけですね。

オブジェクトのキーを使って並び替える

次はオブジェクトのキーを使って並び替えをしてみます。
オブジェクトの中にデータを貯めて、、のような実装をすることも多くあると思うので、sortメソッドでオブジェクトを並び替える方法も知っておきましょう 。

const members = [
  { name: 'Natsumi', old: 21, gender: 'female', height: 158 },
  { name: 'Takashi', old: 18, gender: 'male', height: 180 },
  { name: 'Hitomi', old: 17, gender: 'female', height: 163 },
  { name: 'Jun', old: 32, gender: 'male', height: 165 },
];
const sortTest = members.sort((a, b) => a.height - b.height);
console.log(sortTest) //👉 [120, 70, 20, -30, -110, -990]

実行結果は、

[
  { name: 'Natsumi', old: 21, gender: 'female', height: 158 },
  { name: 'Hitomi', old: 17, gender: 'female', height: 163 },
  { name: 'Jun', old: 32, gender: 'male', height: 165 },
  { name: 'Takashi', old: 18, gender: 'male', height: 180 }
]

となり、heightの数字が小さい頃に並び返すことができました。

注意:sort() は元の配列を並び替える

sortメソッドを使用する上で一つ注意点があります。
それは、sortメソッドは、元の配列データを書き換えてしまうと言う事です。

const scores = [20, -110, 70, 120, -990, -30];
const sortTest = scores.sort((a, b) => b - a);
console.log(sortTest) //👉 [120, 70, 20, -30, -110, -990]
console.log(scores) //👉 [120, 70, 20, -30, -110, -990]

このように4行目で元の配列を確認してみると3行目の順番を入れ替えた配列と同じ結果となってしまいます。
元の配列を壊したくない場合は、sliceメソッドを使って配列をコピーしておくのが良いでしょう。


今回は少し長かったですが以上となります。
皆さんのJSの理解に繋がっていれば幸いです。
次回も楽しみにしていてください。




▼▼あわせて読みたいの記事▼▼

【5分で理解⑤ (配列編)】JavaScriptの配列のeveryメソッド ーsomeメソッドとの違いー

-JavaScript
-, , , ,

執筆者:

関連記事

JS

【JS】連続するsetTimeoutをスッキリさせる【コピペで解消】

今回はJavaScript(以下JS)で連続でsetTimeout()を実装する時によく陥る「コールバックヘル」を解消する方法を記載します。

JS

【JS】イベントリスナー’ DOMContentLoaded ‘と’ load ‘の違いを解説

こんにちは。今回はJavaScript(以下JS)のロード系?のイベントリスナーについて書きたいと思います。 ・DOMContentLoaded・load これらのイベントリスナーはJSを学習しはじめ …

JS

【JS】8分で理解 deferとasyncを図で説明してみた【図解】

こんにちは。今回はJavaScript(以下JS)の「defer属性」と「async属性」について解説します。これらの属性を使うことでページの表示速度をあげることが出来るのでぜひ理解しましょう。早速、 …

JS

【5分で理解⑦ (配列編)】JavaScriptの配列のreduceメソッドで配列の値を”集約”する

第7弾は配列の値を”集約”する時に便利なreduceメソッド

JS

returnについて

今回はJavaScriptでよく出てくるreturnについて書きます。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。