name でのソート

nameをアルファベットの昇順でソートするの場合、特に考えることはありません。

import sortBy from "lodash.sortby";

const sortedItems = sortBy(items, "name");
// =>
// [
//   { name: 'coffee', amount: 500 },
//   { name: 'juice', amount: 500 },
//   { name: 'lunch-a', amount: 1000 },
//   { name: 'lunch-b', amount: 1200 },
//   { name: 'smile', amount: 0 },
//   { name: 'suger' }
// ]

降順にしたい場合、そのためだけにわざわざ lodash.orderBy をもってくる必要はありません。

const sortedItems = sortBy(items, "name").reverse();

アルファベット順以外の基準で並べたい場合には、ただ第二引数にkeyを与えるだけでは足りません。ここでは例として文字数でソートしてみます。

const sortedItems = sortBy(items, (item) => item.name.length);
// =>
// [
//   { name: 'suger' },
//   { name: 'juice', amount: 500 },
//   { name: 'smile', amount: 0 },
//   { name: 'coffee', amount: 500 },
//   { name: 'lunch-b', amount: 1200 },
//   { name: 'lunch-a', amount: 1000 }
// ]

amount でのソート

amountはsugerで定義されていません。そのままamountを指定すると次のような結果になります。

import sortBy from "lodash.sortby";

const sortedItems = sortBy(items, "amount");
// =>
// [
//   { name: 'smile', amount: 0 },
//   { name: 'juice', amount: 500 },
//   { name: 'coffee', amount: 500 },
//   { name: 'lunch-a', amount: 1000 },
//   { name: 'lunch-b', amount: 1200 },
//   { name: 'suger' }
// ]

keyを持たないオブジェクトがあってもエラーになることはありません。

この例では、sugerは無料なので配列の先頭にあるほうが自然です。keyが存在しない場合には、そのオブジェクトを配列の先頭にしてみます。

import sortBy from "lodash.sortby";

const sortedItems = sortBy(items, [(item) => "amount" in item, "amount"]);
// =>
// [
//   { name: 'suger' },
//   { name: 'smile', amount: 0 },
//   { name: 'juice', amount: 500 },
//   { name: 'coffee', amount: 500 },
//   { name: 'lunch-a', amount: 1000 },
//   { name: 'lunch-b', amount: 1200 }
// ]

amountのkeyがある場合には後ろにまわしています。

name と amount でのソート

条件が複数ある場合、どちらも昇順であれば条件を優先したい順に列挙するだけで問題ありません。

import sortBy from "lodash.sortby";

const sortedItems = sortBy(items, [
  (item) => "amount" in item,
  "amount",
  "name",
]);
// =>
// [
//   { name: 'suger' },
//   { name: 'smile', amount: 0 },
//   { name: 'coffee', amount: 500 },
//   { name: 'juice', amount: 500 },
//   { name: 'lunch-a', amount: 1000 },
//   { name: 'lunch-b', amount: 1200 }
// ]

ただし、amountを降順、nameを昇順のようにソート順がkeyによって異なる場合には複雑になります。

import sortBy from "lodash.sortby";

const sortedItemsByNameDesc = sortBy(items, "name").reverse();
const sortedItems = sortBy(sortedItemsByNameDesc, [
  (item) => "amount" in item,
  "amount",
]).reverse();
// =>
// [
//   { name: 'lunch-b', amount: 1200 },
//   { name: 'lunch-a', amount: 1000 },
//   { name: 'coffee', amount: 500 },
//   { name: 'juice', amount: 500 },
//   { name: 'smile', amount: 0 },
//   { name: 'suger' }
// ]

最終的にreverseするので、その前準備としてのソート sortedItemsByNameDesc も最終的なソートとは逆のソートにする必要があってわかりにくい。

ここまで必要になるのであれば、素直にorderByがわかりやすいです。

import orderBy from "lodash.orderBy";

const sortedItems = orderBy(
  items,
  [(item) => "amount" in item, "amount", "name"],
  ["desc", "desc", "asc"]
);
// =>
// [
//   { name: 'lunch-b', amount: 1200 },
//   { name: 'lunch-a', amount: 1000 },
//   { name: 'coffee', amount: 500 },
//   { name: 'juice', amount: 500 },
//   { name: 'smile', amount: 0 },
//   { name: 'suger' }
// ]

name を指定順でソート

name を指定順に並べたいときには並べたい順の配列をあらかじめ作っておき、indexOf を比較します。

import sortBy from "lodash.sortby";
const desiredSort = ["lunch-a", "lunch-b", "juice"];

const sortedItems = sortBy(items, (item) => {
  const index = desiredSort.indexOf(item.name);
  return index === -1 ? undefined : index;
});

上記の例では希望する順序の配列 desiredSort に含まれないものを後ろにしていますが、前にするのであれば indexOf の戻りをそのまま戻すだけになります。