目次
はじめに
コジマです。
以前挙げた
【JavaScript】配列の並び替えを行う【sort】
の記事の延長線にある記事です。
連想配列のソートを行う際に、複数条件でソートするサンプルを
いくつか書いていこうと思います。
こういうのは習うより慣れろでサンプルいっぱい見た方がわかりやすいと思うので
色々紹介していきます。
ユーザーをチーム昇順にしてからスコア降順でソートする
const users = [
{ team: 'A', name: 'Kojima', score: 100 },
{ team: 'C', name: 'Tanaka', score: 60 },
{ team: 'B', name: 'Aida', score: 80 },
{ team: 'C', name: 'Chiba', score: 40 },
{ team: 'A', name: 'Inoue', score: 70 },
{ team: 'C', name: 'Kimura', score: 30 },
{ team: 'B', name: 'Wada', score: 90 },
]
// チーム昇順にしてからスコア降順にしたい
users.sort(function(a, b){
// チームで並び替え
if(a.team !== b.team){
// 文字列は大小で比較する必要がある
if(a.team > b.team) return 1
if(a.team < b.team) return -1
}
// スコアで並び替え
if(a.score !== b.score){
// -1 かけて降順にする
return (a.score - b.score) * -1
}
return 0
})
// 出力
console.log(JSON.stringify(users, null, 2))
> "[
{
"team": "A",
"name": "Kojima",
"score": 100
},
{
"team": "A",
"name": "Inoue",
"score": 70
},
{
"team": "B",
"name": "Wada",
"score": 90
},
{
"team": "B",
"name": "Aida",
"score": 80
},
{
"team": "C",
"name": "Tanaka",
"score": 60
},
{
"team": "C",
"name": "Chiba",
"score": 40
},
{
"team": "C",
"name": "Kimura",
"score": 30
}
]"
タスクを優先度順に並び変えてから種別順に並び替えたい
const tasks = [
{ kindCd: 1, kind: 'バグ', priorityCd: 1, priority: '高', task: '送信ボタン押したら500エラー' },
{ kindCd: 2, kind: 'タスク', priorityCd: 2, priority: '中', task: '打合せ資料作成' },
{ kindCd: 2, kind: 'タスク', priorityCd: 1, priority: '高', task: '登録機能の仕様確認' },
{ kindCd: 1, kind: 'バグ', priorityCd: 3, priority: '低', task: '100以上の値が入力可能' },
{ kindCd: 1, kind: 'バグ', priorityCd: 2, priority: '中', task: '管理者以外が管理画面使用可能' },
{ kindCd: 2, kind: 'タスク', priorityCd: 3, priority: '低', task: 'テストデータ作成' },
{ kindCd: 1, kind: 'バグ', priorityCd: 1, priority: '高', task: '検索結果が取得できない' },
{ kindCd: 2, kind: 'タスク', priorityCd: 3, priority: '低', task: '変数名誤字修正' },
{ kindCd: 1, kind: 'バグ', priorityCd: 2, priority: '中', task: '更新処理の排他制御ができていない' }
]
// 優先度順にしてから種別順にしたい
tasks.sort(function(a, b){
// 優先度で並び替え
if(a.priorityCd !== b.priorityCd){
return a.priorityCd - b.priorityCd
}
// 種別で並び替え
if(a.kindCd !== b.kindCd){
return a.kindCd - b.kindCd
}
return 0
})
// 出力
console.log(JSON.stringify(tasks, null, 2))
> "[
{
"kindCd": 1,
"kind": "バグ",
"priorityCd": 1,
"priority": "高",
"task": "送信ボタン押したら500エラー"
},
{
"kindCd": 1,
"kind": "バグ",
"priorityCd": 1,
"priority": "高",
"task": "検索結果が取得できない"
},
{
"kindCd": 2,
"kind": "タスク",
"priorityCd": 1,
"priority": "高",
"task": "登録機能の仕様確認"
},
{
"kindCd": 1,
"kind": "バグ",
"priorityCd": 2,
"priority": "中",
"task": "管理者以外が管理画面使用可能"
},
{
"kindCd": 1,
"kind": "バグ",
"priorityCd": 2,
"priority": "中",
"task": "更新処理の排他制御ができていない"
},
{
"kindCd": 2,
"kind": "タスク",
"priorityCd": 2,
"priority": "中",
"task": "打合せ資料作成"
},
{
"kindCd": 1,
"kind": "バグ",
"priorityCd": 3,
"priority": "低",
"task": "100以上の値が入力可能"
},
{
"kindCd": 2,
"kind": "タスク",
"priorityCd": 3,
"priority": "低",
"task": "テストデータ作成"
},
{
"kindCd": 2,
"kind": "タスク",
"priorityCd": 3,
"priority": "低",
"task": "変数名誤字修正"
}
]"
地域順にしてから男性の人口降順にしたい
多重の連想配列になってもやることは変わりません。
const populations = [
{ region: 'Kanto', prefecture: 'Tokyo', population: { men: 200 ,women: 200} },
{ region: 'Kansai', prefecture: 'Kobe', population: { men: 125 ,women: 120} },
{ region: 'Tohoku', prefecture: 'Iwate', population: { men: 40 ,women: 55} },
{ region: 'Kanto', prefecture: 'Kanagawa', population: { men: 140 ,women: 150} },
{ region: 'Kanto', prefecture: 'Gunma', population: { men: 70 ,women: 60} },
{ region: 'Tohoku', prefecture: 'Akita', population: { men: 60 ,women: 65} },
{ region: 'Kansai', prefecture: 'Osaka', population: { men: 145 ,women: 140} },
{ region: 'Tohoku', prefecture: 'Miyagi', population: { men: 100 ,women: 90} },
]
// 地域順にしてから男性の人口降順にしたい
populations.sort(function(a, b){
// 地域で並び替え
if(a.region !== b.region){
if(a.region < b.region) return -1
if(a.region > b.region) return 1
}
// 男性の人口で並び替え
if(a.population.men !== b.population.men){
return (a.population.men - b.population.men) * -1
}
return 0
})
// 出力
console.log(JSON.stringify(populations, null, 2))
> "[
{
"region": "Kansai",
"prefecture": "Osaka",
"population": {
"men": 145,
"women": 140
}
},
{
"region": "Kansai",
"prefecture": "Kobe",
"population": {
"men": 125,
"women": 120
}
},
{
"region": "Kanto",
"prefecture": "Tokyo",
"population": {
"men": 200,
"women": 200
}
},
{
"region": "Kanto",
"prefecture": "Kanagawa",
"population": {
"men": 140,
"women": 150
}
},
{
"region": "Kanto",
"prefecture": "Gunma",
"population": {
"men": 70,
"women": 60
}
},
{
"region": "Tohoku",
"prefecture": "Miyagi",
"population": {
"men": 100,
"women": 90
}
},
{
"region": "Tohoku",
"prefecture": "Akita",
"population": {
"men": 60,
"women": 65
}
},
{
"region": "Tohoku",
"prefecture": "Iwate",
"population": {
"men": 40,
"women": 55
}
}
]"
さいごに
このくらいあればどうにかなる（と思う）
並び替えたい項目が3個4個になっても
連想配列の構造が3重4重になってもやることは変わりません。
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
もっと学びたい人はこちら
JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！
JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！
JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム
気になった人はぜひ見てみてくださいね！
以上、コジマでした。
