カスタム順序でオブジェクト配列をソートする

はじめに

この実験では、与えられたプロパティとカスタムのオーダー配列に基づいてオブジェクトの配列をソートする方法を検討します。 Array.prototype.reduce() と Array.prototype.sort() を組み合わせて、 order 配列に提供された順序に基づいてソートされた新しい配列を作成します。この実験は、JavaScript でオブジェクトの配列を操作する方法を学ぶ良い機会です。

プロパティ順序に基づいてオブジェクトの配列をソートする方法

プロパティ順序に基づいてオブジェクトの配列をソートするには、次の手順を実行します。

1. ターミナル/SSH を開き、コーディングを練習するために node と入力します。
2. Array.prototype.reduce() を使用して、 order 配列からオブジェクトを作成し、値をキーとし、その元のインデックスを値とします。
3. Array.prototype.sort() を使用して、与えられた配列をソートし、 prop が空または order 配列に存在しない要素をスキップします。

以下は、プロパティ順序に基づいてオブジェクトの配列をソートするためのコード スニペットの例です。

const orderWith = (arr, prop, order) => {
  const orderValues = order.reduce((acc, v, i) => {
    acc[v] = i;
    return acc;
  }, {});
  return [...arr].sort((a, b) => {
    if (orderValues[a[prop]] === undefined) return 1;
    if (orderValues[b[prop]] === undefined) return -1;
    return orderValues[a[prop]] - orderValues[b[prop]];
  });
};

orderWith 関数を使用して、プロパティ順序に基づいてオブジェクトの配列をソートできます。たとえば：

const users = [
  { name: "fred", language: "Javascript" },
  { name: "barney", language: "TypeScript" },
  { name: "frannie", language: "Javascript" },
  { name: "anna", language: "Java" },
  { name: "jimmy" },
  { name: "nicky", language: "Python" }
];
orderWith(users, "language", ["Javascript", "TypeScript", "Java"]);
/*
[
  { name: 'fred', language: 'Javascript' },
  { name: 'frannie', language: 'Javascript' },
  { name: 'barney', language: 'TypeScript' },
  { name: 'anna', language: 'Java' },
  { name: 'jimmy' },
  { name: 'nicky', language: 'Python' }
]
*/

まとめ

おめでとうございます！プロパティ順序に基づいたオブジェクトの配列をソートする実験を完了しました。スキルを向上させるために、LabEx でさらに多くの実験を行って練習できます。