JavaScriptでオブジェクトの配列をプロパティ値で並べ替える方法

JavaScriptでオブジェクトの配列をプロパティ値で並べ替える方法をご覧ください


次のようなオブジェクトの配列があるとします。

const list = [
  { color: 'white', size: 'XXL' },
  { color: 'red', size: 'XL' },
  { color: 'black', size: 'M' }
]

このリストをレンダリングしたいが、最初にいずれかのプロパティの値でリストを並べ替えたい。たとえば、黒、赤、白のアルファベット順に色名で並べ替えたいとします。

あなたは使用することができますsort()の方法Array、はコールバック関数を取ります。これは、配列に含まれる2つのオブジェクトをパラメーターとして受け取ります(これを呼び出します)。aそしてb):

list.sort((a, b) => (a.color > b.color) ? 1 : -1)

1を返すと、関数は次のように通信します。sort()そのオブジェクトbオブジェクトよりもソートが優先されますa。戻る-1反対のことをします。

コールバック関数は、他のプロパティも計算して、色が同じ場合を処理し、セカンダリプロパティで並べ替えることもできます。

list.sort((a, b) => (a.color > b.color) ? 1 : (a.color === b.color) ? ((a.size > b.size) ? 1 : -1) : -1 )

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: