【JavaScript TypeScript】オブジェクトを要素に持つ配列をオブジェクトのキーごとにソート #JavaScript

例えば

[{name: "Aさん", age: 42},{name: "Bさん", age: 23},{name: "Cさん", age: 379}]

みたいなデータを

{ name: [ 'Aさん', 'Bさん', 'Cさん' ], age: [ 42, 23, 379 ] }

キーごとにソートしたい！

JavaScript(ES6)

いろんな方法がありますが、reduce使うのがベターかなと思っています。

sortArrayByKey.js


function sortArrayByKey(arr) {
  const object = arr.reduce((prev, current) => {
    Object.keys(current).forEach((key) => {
      if(!prev[key]) prev[key] = []
      prev[key].push(current[key])
    })
    return prev
  },{})
  return object
}

const base = [{name: "Aさん", age: 42},{name: "Bさん", age: 23},{name: "Cさん", age: 379}]
const sorted = sortArrayByKey(base) // { name: [ 'Aさん', 'Bさん', 'Cさん' ], age: [ 42, 23, 379 ] }

TypeScriptでの注意

むしろこちらのほうが重要で、reduceにより型が全く変わる場合の記法を知りませんでした。

sortArrayByKey.ts

interface BaseObj {
  [key: string]: string | number;
}

interface SortedObj {
  [key: string]: (string | number)[] ;
}

function sortArrayByKey(arr: BaseObj[]): SortedObj {
  const object = arr.reduce<SortedObj>((prev, current) => {
    Object.keys(current).forEach((key) => {
      if(!prev[key]) prev[key] = []
      prev[key].push(current[key])
    })
    return prev
  },{})
  return object
}

const base = [{name: "Aさん", age: 42},{name: "Bさん", age: 23},{name: "Cさん", age: 379}]
const sorted = sortArrayByKey(base) // { name: [ 'Aさん', 'Bさん', 'Cさん' ], age: [ 42, 23, 379 ] }

arr.reduce<SortedObj>
ここで返り値の型宣言をしないと、返り値の型がBaseObjインタフェースで認識されてしまい、pushやreturn objectでエラーが発生します。