JavaScript でオブジェクトをフィルタリング：filter() メソッドを使用する

2024-04-15

JavaScript: filter() メソッドでオブジェクトをフィルタリングする方法

このチュートリアルでは、JavaScript の filter() メソッドを使用してオブジェクトをフィルタリングする方法について説明します。 filter() メソッドは、配列内の要素を条件に基づいてフィルタリングし、新しい配列を作成するのに役立ちます。オブジェクトの場合、filter() メソッドを使用して、特定の条件に一致するプロパティを持つオブジェクトのみを含む新しいオブジェクトを作成できます。

前提知識

このチュートリアルを理解するには、以下の基本的な JavaScript の知識が必要です。

オブジェクトの作成と操作
関数とコールバック関数の使用方法
filter() メソッドの使い方

例

次の例では、filter() メソッドを使用して、年齢が 18 歳以上のユーザーのみを含む新しいオブジェクトを作成する方法を示します。

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Peter", age: 18 },
];

const filteredUsers = users.filter(user => user.age >= 18);

console.log(filteredUsers);

このコードは次の出力を生成します。

[ { name: "John", age: 30 }, { name: "Jane", age: 25 }, { name: "Peter", age: 18 } ]

この例では、filter() メソッドは各ユーザーオブジェクトを反復処理し、user.age >= 18 条件が真の場合のみそのオブジェクトを新しい filteredUsers 配列に追加します。

jQuery を使用したフィルタリング

jQuery ライブラリを使用して、オブジェクトをフィルタリングすることもできます。次の例では、jQuery の filter() メソッドを使用して、年齢が 18 歳以上のユーザーのみを含む新しいオブジェクトを作成する方法を示します。

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Peter", age: 18 },
];

const filteredUsers = $(users).filter(function() {
  return this.age >= 18;
});

console.log(filteredUsers);

補足

filter() メソッドは、オブジェクトのキーをフィルタリングするのにも使用できます。次の例では、名前が "John" または "Jane" であるキーのみを含む新しいオブジェクトを作成する方法を示します。

const users = {
  John: { age: 30 },
  Jane: { age: 25 },
  Peter: { age: 18 },
};

const filteredUsers = Object.keys(users).filter(key => key === "John" || key === "Jane");

console.log(filteredUsers);

[ "John", "Jane" ]

filter() メソッドは、JavaScript でオブジェクトをフィルタリングするための強力なツールです。このチュートリアルで説明した例は、このメソッドをさまざまな方法で使用する方法のほんの一例です。

サンプルコード：JavaScript でオブジェクトをフィルタリングする方法

年齢に基づいてオブジェクトをフィルタリングする

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Peter", age: 18 },
];

const filteredUsers = users.filter(user => user.age >= 30);

console.log(filteredUsers);

[ { name: "John", age: 30 } ]

名前と年齢に基づいてオブジェクトをフィルタリングする

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Peter", age: 18 },
];

const filteredUsers = users.filter(user => user.name === "John" && user.age >= 30);

console.log(filteredUsers);

[ { name: "John", age: 30 } ]

オブジェクトのキーをフィルタリングする

const users = {
  John: { age: 30 },
  Jane: { age: 25 },
  Peter: { age: 18 },
};

const filteredUsers = Object.keys(users).filter(key => key === "John" || key === "Jane");

console.log(filteredUsers);

[ "John", "Jane" ]

jQuery を使用してオブジェクトをフィルタリングする

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Peter", age: 18 },
];

const filteredUsers = $(users).filter(function() {
  return this.age >= 30;
});

console.log(filteredUsers);

このコードは、上記の JavaScript コードと同じ出力を生成します。

これらの例は、JavaScript でオブジェクトをフィルタリングする方法を示すほんの一例です。 filter() メソッドを使用して、さまざまな条件に基づいてオブジェクトをフィルタリングできます。

JavaScript でオブジェクトをフィルタリングするその他の方法

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Peter", age: 18 },
];

const filteredUsers = users.reduce((acc, user) => {
  if (user.age >= 30) {
    acc[user.name] = user;
  }
  return acc;
}, {});

console.log(filteredUsers);

{ John: { name: "John", age: 30 } }

for...in ループを使用して、オブジェクトのキーを反復処理し、条件に基づいて新しいオブジェクトにキーと値を追加できます。次の例では、for...in ループを使用して、名前が "John" または "Jane" であるキーのみを含む新しいオブジェクトを作成する方法を示します。

const users = {
  John: { age: 30 },
  Jane: { age: 25 },
  Peter: { age: 18 },
};

const filteredUsers = {};

for (const key in users) {
  if (key === "John" || key === "Jane") {
    filteredUsers[key] = users[key];
  }
}

console.log(filteredUsers);

{ John: { age: 30 }, Jane: { age: 25 } }

ES6 の Object.values() と Array.from() メソッドを使用して、オブジェクトの値を配列に変換し、filter() メソッドを使用してフィルタリングしてから、新しいオブジェクトに変換できます。次の例では、この方法を使用して、年齢が 30 歳以上のユーザーのみを含む新しいオブジェクトを作成する方法を示します。

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Peter", age: 18 },
];

const filteredUsers = Object.from(
  Object.keys(users)
    .filter(key => users[key].age >= 30)
    .map(key => [key, users[key]])
);

console.log(filteredUsers);

{ John: { name: "John", age: 30 } }

ライブラリを使用する

const users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Peter", age: 18 },
];

const filteredUsers = _.filter(users, user => user.age >= 30);

console.log(filteredUsers);