BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】ES6でオブジェクトのプロパティをキーでフィルタリングする

2022-04-17 15:51:58

質問

例えば、あるオブジェクトがあるとします。 

{
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

上のオブジェクトをフィルタリングして別のオブジェクトを作りたいので、次のようなものがあります。 

 {
    item1: { key: 'sdfd', value:'sdfd' },
    item3: { key: 'sdfd', value:'sdfd' }
 }

私はEs6を使ってこれを達成するクリーンな方法を探しているので、スプレッドオペレータが利用可能です。

どのように解決するのですか？

許容値のリストがあれば、それを使って簡単にオブジェクトに保持することができます。 

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    obj[key] = raw[key];
    return obj;
  }, {});

console.log(filtered);

これを利用します。

  1. Object.keys にあるすべてのプロパティを一覧表示します。 raw (元データ)であれば
  2. Array.prototype.filter を使って、許可されたリストに存在するキーを選択します。
    1. Array.prototype.includes が存在することを確認する
  3. Array.prototype.reduce を使用して、許可されたプロパティのみを持つ新しいオブジェクトを構築します。

これは、許可されたプロパティを持つ浅いコピーを作成します（ただし、プロパティそのものはコピーしません）。

また オブジェクト拡散演算子 を使えば、オブジェクトを変異させることなく、一連のオブジェクトを作成することができます（これは このことに言及したrjerue ): 

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    return {
      ...obj,
      [key]: raw[key]
    };
  }, {});

console.log(filtered);

豆知識として、元データから不要なフィールドを削除したい場合（これは私が しない これは醜い突然変異を伴うので、お勧めしません）。 includes のようにチェックします。 

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

Object.keys(raw)
  .filter(key => !allowed.includes(key))
  .forEach(key => delete raw[key]);

console.log(raw);

この例は突然変異に基づく解決策を示すものですが、これを使うことはお勧めしません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します