[javascript符号化の技術]5章Tip 26

配列データをReduce()に変換

並べ替え方の利点は,コールバック関数を理解する前に,リンゴの値を一目で予測できることである.
そしてテストも簡単です.
配列を使用して新しいデータを作成したり、特定の項目の数を必要としたり、配列をオブジェクトなどの他の形式に変換したりする必要がある場合があります.この場合reduce()メソッドを使用できます.
reduce()メソッドでは、配列の長さとデータ型を同時にまたは個別に変更できます.

  const callback = function (collectedValues, item) { // <label id="reduce.callback" />
    return [...collectedValues, item];
  };
const saying = ['veni', 'vedi', 'veci'];
  const initialValue = [];
  const copy = saying.reduce(callback, initialValue); // <label id="reduce.method" />
  /

1行目はコールバック関数に2つの係数を渡します.2つのパラメータは、返されるアイテム(CollectedValue)と単一のアイテムです.
この戻り値は累積値とします.
7行目のreduce()メソッドは、コールバック関数とデフォルト値の2つの値を渡します.
デフォルト値を作成すると、戻り値を含めることができます.

const dogs = [
  {
    이름: '맥스',
    크기: '소형견',
    견종: '보스턴 테리어',
    색상: '검정색',
  },
  {
    이름: '도니',
    크기: '대형견',
    견종: '래브라도레트리버',
    색상: '검정색',
  },
  {
    이름: '섀도',
    크기: '중형견',
    견종: '래브라도레트리버',
    색상: '갈색',
  },
];

reduce()メソッドを使用する場合

  const colors = dogs.reduce((colors, dog) => { // <label id="reduce.params" />
    if (colors.includes(dog['색상'])) { // <label id="reduce.includes"/>
      return colors;
    }
    return [...colors, dog['색상']]; // <label id="reduce.returnUpdate" />
  }, []); // <label id="reduce.initial" />

最後のコードを見ると[]配列で関数を初期化することがわかります.
累積値も重要ですが、関数体を観察することなく、別の配列を返すことがわかります.
したがって、積算値は明確に記入することが望ましい.
また、累積値を返さないと、その値は完全に消えてしまうため、エラーが発生します.

const colors = dogs.reduce((colors, dog) => {
    if (colors.includes(dog['색상'])) {
      return colors;
    }
    [...colors, dog['색상']]; // <label id="reduce.mistake" />
  }, []);

シナリオに含まれていることを確認します.新しい色の場合は、5行のセットに追加して更新されたシナリオに戻ります.
再整理すると.

のデータの一部を返し、

のサイズを変更します.

形状

を同時に変更する.
アレイの内部情報に基づいてサイズを変更することが重要です.

const colors = dogs.map(dog => dog['색상']);

犬の色のコードだけ集めて

const colors = dogs.reduce((colors, dog) => {
    return [...colors, dog['색상']];
  }, []);

両方のコードは同じ結果です.
属性の値を収集する必要がある場合はmap()を使用するのが適切です.しかし、より簡単な方法はreducerの柔軟性を高め、より多くの値を処理しやすくすることです.
2つの方法があります.

1つ目の方法は、オブジェクトのすべてのキーに対して複数のmap()を実行し、値をセットに渡して分類することです.

2つ目の方法は、初期値が空のreduce()を使用してオブジェクトを埋めます.

後者はもっと簡単な方法です.
すなわち、map()ではなくreduce()を多くの値が必要とされる場合に使用することが望ましい.

const filters = dogs.reduce((filters, itme)=> {
    filters.breed.add(item['breed']);
    filters.size.add(item['size']);
    filters.color.add(item['color']);
    return filters;
}, {
    breed: new Set(),
    size: new Set(),
    color: new Set(),
});

この投稿はJavaScriptコードの技術書を要約しています.