JavaScriptでオブジェクトから値を検索し、ソートする方法

最近まで会員サイトの構築に追われておりましたが、無事リリースすることができひと段落できました。

さて、今回はタイトルの通りJavaScriptのオブジェクト（連想配列）の値を検索してソートする方法についてご紹介していきたいと思います。

基本的なところだとは思うのですが、意外とJavaScriptのオブジェクトの扱いって難しかったりするんです。

ということで今回は下記のようなオブジェクトを検索&ソートしていきたいと思います。

const target = [
  {
    id: 1,
    name: '田中一郎',
    nameKana: 'タナカイチロウ',
    point: 0,
  },
  {
    id: 2,
    name: '田中二郎',
    nameKana: 'タナカジロウ',
    point: '',
  },
  {
    id: 3,
    name: '田中三郎',
    nameKana: 'タナカサブロウ',
    point: 3,
  },
  {
    id: 4,
    name: '田中四郎',
    nameKana: 'タナカシロウ',
    point: 5,
  },
  {
    id: 5,
    name: '田中五郎',
    nameKana: 'タナカゴロウ',
    point: 6,
  },
  {
    id: 6,
    name: '佐藤一郎',
    nameKana: 'サトウイチロウ',
    point: '',
  }
];

今回実装してみるのは下記の検索&ソートです。

• 名前の部分一致検索
• idの昇順/降順
• pointが空のユーザーの検索

後述しますが、pointの昇順降順もidと同じように実装することができます。

では、実際のコードを見てみましょう。

/** search text **/
const searchTxt = (el,txt) => {
  return el.reduce((acc, val) => {
    if(val.name.indexOf(txt) !== -1 || val.nameKana.indexOf(txt) !== -1) {
      acc.push(val);
    }
    return acc;
  }, [])
}


const searchNoPoint = (el) => {
  return el.reduce((acc, val) => {
    if(val.point === '') {
      acc.push(val);
    }
    return acc;
  }, [])
}

/** sort **/
// aに二番目の値、bに一番目の値が入る
const sortUp = (a, b) => {
  return a.id - b.id;
}

const sortDown = (a, b) => {
  return b.id - a.id;
}

そして実際に動かしてみているのが下記になります。

やはりarray.reduceは便利ですね。

Array.prototype.reduce() - JavaScript | MDN

配列にしちゃえばなんでもreduceでなんとかなるのではないでしょうか？

また、sort関数ですが独自にソート用の関数を定義することができるため自由にソート条件をカスタマイズすることができます。（今回はただの昇順降順ですが...）

結局のところオペランドの真偽値で順番が決まるので、文字の昇順降順とかもいけるみたいです。

Array.prototype.sort() - JavaScript | MDN

そんなに濃い内容ではなかったですが、意外と使う機会が多い内容だったのではないでしょうか？

では今回はこのへんで...