✂️

リストオブジェクトの操作方法(filter, map, reduceなど)

2021/10/23に公開

はじめに

以下のようなただのリスト形式を操作するサンプルとかはよく見るのですが、

const array = [1, 2, 3, 4, ...];
const array = ['a', 'b', 'c', 'd', ...];

リスト形式の中にオブジェクトが入っているような配列操作のサンプルがあまりないので自分用メモ
こういうのってなんて言うのが正解なんでしょう?(リストオブジェクト?連想配列?)

const array = [{object}, {object}, {object}, {object}, ...];

前提

以下のようなデータ形式を用意するものとします。

const arrayObject1 = [
  {
    id: 1,
    name: 'Apple',
    value: 10,
    date: '20200101'
  },
  {
    id: 2,
    name: 'Banana',
    value: 20,
    date: '20200102'
  },
  {
    id: 3,
    name: 'Cake',
    value: 30,
    date: '20200103'
  },
  {
    id: 4,
    name: 'Doughnut',
    value: 40,
    date: '20200101'
  },
];

filter, map, reduceの使い方

filter

// date(key)の値が'20200101'のオブジェクトのみ抽出する
const filter1 = arrayObject1.filter((row) => row.date === '20200101');
console.log(filter1);
// [
//   { id: 1, name: 'Apple',    value: 10, date: '20200101' },
//   { id: 4, name: 'Doughnut', value: 40, date: '20200101' }
// ]

map

// value(key)の値だけをリストとして抽出する
const map1 = filter1.map((row) => row.value);
console.log(map1);
// [ 10, 40 ]

reduce

// リストの数値の合計値を算出して格納する
const reduce1 = map1.reduce((previousValue, currentValue) => previousValue + currentValue);
console.log(reduce1);
// 50

連結ver

// 上記の処理を一連にしてまとめたもの
const filterMapReduce1 = arrayObject1.filter((row) => row.date === '20200101')
    .map((row) => row.value)
    .reduce((a, b) => a + b)
  ;
console.log(filterMapReduce1);
// 50

every, someの使い方

以下のようなデータ形式を用意するものとします。

const arrayObject2 = [
  {
    id: 1,
    name: 'Apple',
    flag: true,
  },
  {
    id: 2,
    name: 'Banana',
    flag: true,
  },
  {
    id: 3,
    name: 'Cake',
    flag: false,
  },
  {
    id: 4,
    name: 'Doughnut',
    flag: true,
  },
];

every

// 全てのリスト内オブジェクトのflag(key)がtrueの場合にtrueを返却
const every1 = arrayObject2.every((row) => row.flag === true);
console.log(every1);
// false

some

someの用途はあんま思い浮かばないのですが、即時にbreakすることで計算量が減るので嬉しいという感じですかね。。
異常値チェックとかで使用するのが一番用途としてありそうですかね。(数値が0だったり、何かのフラグがFalseだったり)

// リスト内オブジェクトのflag(key)のいずれかでfalseがあった場合に即時にtrueを返却
// それ以外の場合にfalseを返却する
// 異常値チェックなどの際に使用したい
const some2 = arrayObject2.some((row) => row.flag === false);
console.log(some2);
// true

おわりに

リスト操作結構便利なのですが、あんまこういう総当たり的な計算は行わない方が良いと思います。
そのため、処理するデータの数が増えることが予想される場合、データの取得時にうまく絞り込めるような工夫をすべきだと思います。

以上になります。参考になりましたら幸いです。

Discussion