Zenn
💡

【jsワンライナー】多次元配列内の重複要素を加工したデータを取得する

2021/03/21に公開2件
#
filter
#
map
JavaScript
#
ワンライナー
#
reduce
tech

今回利用する多次元配列

const arr = [
   { id: 1, name: '太郎', money: 3000 },
   { id: 2, name: '次郎', money: 1000 },
   { id: 3, name: '三郎', money: 1200 },
   { id: 2, name: '次郎', money: 500 },
   { id: 1, name: '太郎', money: 1300 },
   { id: 1, name: '太郎', money: 10000 }
]

実装

Object.values(arr.reduce((a, {id, name, money}) => ({...a, [id]:{id, name, money:(a[id] ? a[id].money : 0) + money}}), {}))

>>> [ { id: 1, name: '太郎', money: 14300 },
      { id: 2, name: '次郎', money: 1500 },
      { id: 3, name: '三郎', money: 1200 } ]

Object.values

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]

MDN

Array.prototype.reduce

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
  • reduceは4つの引数をとり、それぞれ「直前の結果」「今回の値」「連番」「自身の配列」を示します。

色々な使い方
MDN

参考

中身が違う多次元配列を重複チェックする

Discussion

nap5nap5

集計集約操作を達成したい場合はtidyjsライブラリを使うとハンディかもです。

demo code.
https://codesandbox.io/p/sandbox/pedantic-nova-d2xjde?file=%2Fsrc%2Findex.ts

import { default as dump } from "pretty-format";

import { tidy, groupBy, sum, summarize } from "@tidyjs/tidy";

// Input
const data = [
  { id: 1, name: "太郎", money: 3000 },
  { id: 2, name: "次郎", money: 1000 },
  { id: 3, name: "三郎", money: 1200 },
  { id: 2, name: "次郎", money: 500 },
  { id: 1, name: "太郎", money: 1300 },
  { id: 1, name: "太郎", money: 10000 },
];

const result = tidy(
  data,
  groupBy(["id", "name"], summarize({ total: sum("money") }))
);

console.log(dump(result));

// Output
Array [
  Object {
    "id": 1,
    "name": "太郎",
    "total": 14300,
  },
  Object {
    "id": 2,
    "name": "次郎",
    "total": 1500,
  },
  Object {
    "id": 3,
    "name": "三郎",
    "total": 1200,
  },
]

簡単ですが、以上です。