みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
今回は配列をソートしよう！について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- 配列のソートができるようになる
- オブジェクトのソートができるようになる
ソートとは
ソートとはそもそも何かというと、
いわゆる並び替えです。
昇順とは
昇順とは0, 1, 2, 3, ….のように
数字が大きくなっていく順番です。
降順とは
降順とは10, 9, 8, 7, ….のように
数字が小さくなっていく順番です。
sort関数を使おう
javascriptでソートを行うにはsort関数を使います
■ 構文
配列名.sort();ランダムな数値が入った配列を昇順にソートしよう!
実際にランダムに並べた数値をソートしてみましょう
// 配列の宣言
const numList = [2, 5, 1, 100, 123, 0, 4, 3];
// 配列のソート※昇順
numList.sort();
console.log(numList);【出力結果】[0, 1, 100, 123, 2, 3, 4, 5]と思った方が多いと思います.
これはどういう仕組かというと
ソート関数は数値の大小ではなく、”文字列”として比較した結果並び替えを行います。
なので、1の次は2ではなく”1なんちゃら”という結果となります。
コールバック関数を使ってソートしよう！
数値としてソートするにはコールバック関数として、
配列の中身を2つずつ渡してそれらの値を比較することで実現出来ます。
ちょっと文字にするとややこしいですが、
以下のように記述してください。
■ 構文
配列名.sort((変数1, 変数2) => {
if (変数1 > 変数2) {
return 1;
} else {
return -1;
}
});■ 構文 ※省略形
配列名.sort((変数1, 変数2) => {
return 変数1 > 変数2 ? 1: -1;
});それでは、先程例に上げた配列をソートしてみましょう。
// 配列の宣言
const numList = [2, 5, 1, 100, 123, 0, 4, 3];
// 配列の中身をソートする
numList.sort((item1, item2) => {
console.log("item1: " + item1 + " , item2: " + item2);
// item1の値がitem2よりも大きければ、
// item1, item2 という順に並べる
if (item1 > item2) {
return 1;
// item1の値がitem2よりも小さければ、
// item2, item1 という順に並べる
} else {
return -1;
}
});
console.log(numList);【出力結果】[0, 1, 2, 3, 4, 5, 100, 123]このように、数値としてのソートを行うことが出来ました！
オブジェクトの並び替えをしよう!
ここではオブジェクトのプロパティを基準に並び替えを行いましょう。
おそらくこれが最もポピュラーな使い方になると思います！
以下のユーザをIDを基準に並び替えます。
- { name: “いぬハック”, id: “A003” }
- { name: “サメハック”, id: “A001” }
- { name: “ねこハック”, id: “A002” }
配列とオブジェクトについて不安な方はこちらの記事を参考にしてください！
// ユーザリストの宣言
const userList = [
//key : value
{ name: "いぬハック", id: "A003" },
{ name: "サメハック", id: "A001" },
{ name: "ねこハック", id: "A002" },
];
// ユーザのidを基準に並び替える
userList.sort((item1, item2) => {
return item1.id > item2.id ? 1: -1;
});
console.log(userList);【出力結果】
[
{ name: 'サメハック', id: 'A001' },
{ name: 'ねこハック', id: 'A002' },
{ name: 'いぬハック', id: 'A003' }
]このようにid順に並び替えることが出来ました！
降順にしたいんだけど！？
降順にしたいという場合は、先程まで設定していた大なり記号を、
小なり記号に変更するだけです。
■ 構文
配列名.sort((変数1, 変数2) => {
if (変数1 < 変数2) {
return 1;
} else {
return -1;
}
});■ 構文 ※省略形
配列名.sort((変数1, 変数2) => {
return 変数1 < 変数2 ? 1: -1;
});sort関数を使う上での注意点
sortは破壊的関数
sort関数はもとの配列の並び自体を変えてしまう
破壊的な関数ですので、もとの関数に影響を出したくない場合は
配列を複製してそちらをソートしましょう。
配列の複製はslice関数を使う
配列を複製したい場合は
const 配列A = 配列B;というような記述をしてはいけません。
今回の内容から外れるので詳細は割愛しますが、
上記のような記述ですと、配列Aと配列Bは中身がリンクしてしまいます。
完全に新たな配列として扱いたい場合はslice関数を使いましょう。
const 配列A = 配列B.slice();slice関数については以下の記事を参考にしてください。
まとめ
- 配列の並び替えにはsort関数を使う
- 配列名.sort();
- sort関数は元の配列を破壊する
- オブジェクトや数値を並べ替えたい場合はコールバック関数を使おう
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
