JavaScript で配列からオブジェクトを検索する
JavaScript では、配列データ構造内でデータを操作して格納することは非常に一般的です。配列データ構造は、数値、文字列、要素としての別の配列、オブジェクトなど、さまざまな方法をとることができます。この記事では、配列内のオブジェクトと、個々のオブジェクト内に存在するさまざまな値を検索する方法について説明します。
ここに、arrayofObjects という名前のオブジェクトの配列があります。各オブジェクトの内部には、キーと値のペアで表されるさまざまな値があります。3つのキーと値のペアがあります。キーは name、profession、company です。これらのキーを使用して、個々のオブジェクトのそれぞれの値にアクセスできるようになります。
var arrayofObjects = [
{name: 'Adam', profession: 'Engineer', company: 'Google'},
{name: 'Sam', profession: 'Manager', company: 'Amazon'},
{name: 'Gerogia', profession: 'Designer', company: 'Netflix'},
{name: 'Kate', profession: 'Engineer', company: 'Microscoft'},
{name: 'James', profession: 'Sales', company: 'Amazon'},
];
配列は角括弧 [] で表されますが、オブジェクトは中括弧 {} で表されます。
配列内のオブジェクトを見つける方法はいくつかあります。いくつかの方法を以下に示します。
JavaScript で forEach() を使用して配列内のオブジェクトを検索する
配列内のオブジェクトを検索する従来の方法は、forEach() ループを使用することです。これにより、for ループ内に存在する各要素をループできます。
まず、配列から forEach() を使用してオブジェクト全体にアクセスしましょう。後で、オブジェクト内に存在する個々の値にアクセスする方法を説明します。上記の配列からオブジェクト全体を出力するには、forEach() ループを使用できます。このループは、配列からの要素自体と要素のインデックスの 2つを提供します。そのためには、2つのパラメーターを forEach() に渡す必要があります。この場合、必要なのは要素のみで、インデックスは必要ないため、1つのパラメーターobject を渡します。このパラメーターには任意の名前を付けることができます。
// print name of the people who work at amazon
arrayofObjects.forEach(object => {
console.log(object);
});
forEach() ループはすべての要素をループするため、その要素はこの object 変数内に格納されます。これで、object 変数に配列のオブジェクト全体が含まれるようになります。コンソールを使用してこの object 変数を出力すると、配列に存在するすべてのオブジェクトが出力されます。
出力：
Object { name: "Adam", profession: "Engineer", company: "Google" }
Object { name: "Sam", profession: "Manager", company: "Amazon" }
Object { name: "Gerogia", profession: "Designer", company: "Netflix" }
Object { name: "Kate", profession: "Engineer", company: "Microsoft" }
Object { name: "James", profession: "Sales", company: "Amazon" }
配列からすべてのオブジェクトを取得しました。これらのオブジェクトから内部値にアクセスしましょう。それでは、アマゾン社で働く従業員の名前を出力してみましょう。オブジェクトから任意のキーにアクセスするには、object 変数の後にドットを使用してキーを指定します。たとえば、会社のキーにアクセスするには、object.company を使用します。
// print name of the people who work at amazon
arrayofObjects.forEach(object => {
if (object.company === 'Amazon') {
console.log('Amazon Employee:', object.name);
}
});
if ステートメントを使用して、キーの値を文字列 Amazon と比較し、それが一致する場合は、if ステートメント内に入力します。その後、上記のように object.name を使用して amazon で働く従業員の名前を出力します。これにより、以下の出力が得られます。
出力：
Amazon Employee: Sam
Amazon Employee: James
アマゾンで働くのは 2 人だけなので、出力として Sam と James を取得します。
同様に、以下の name、profession、および company キーを使用して、すべてのオブジェクトからすべての値を出力できます。
// print every details of a person
arrayofObjects.forEach(object => {
console.log(
object.name + ' is ' + object.profession + ' who works at ' +
object.company);
});
出力：
Adam is Engineer who works at Google
Sam is Manager who works at Amazon
Georgia is a Designer who works at Netflix
Kate is Engineer who works at Microsoft
James is Sales who works at Amazon
JavaScript の find() メソッドを使用して配列内のオブジェクトを検索する
find() メソッドは、JavaScript の配列からオブジェクトとその要素を検索する別の方法です。find() は ES6 メソッドです。このメソッドは forEach() ループと同様に機能し、オブジェクト内の要素へのアクセスは以前に見たものと同様です。
コード内の forEach を find に置き換えれば、準備は完了です。以下のコードは、配列からすべてのオブジェクトも出力します。
arrayofObjects.find(object => {
console.log(object);
});
出力：
Object { name: "Adam", profession: "Engineer", company: "Google" }
Object { name: "Sam", profession: "Manager", company: "Amazon" }
Object { name: "Gerogia", profession: "Designer", company: "Netflix" }
Object { name: "Kate", profession: "Engineer", company: "Microsoft" }
Object { name: "James", profession: "Sales", company: "Amazon" }
同様に、次のようにそれぞれのキーを使用して、配列のオブジェクトのすべての値にアクセスすることもできます。
arrayofObjects.find(object => {
console.log(
object.name + ' is ' + object.profession + ' who works at ' +
object.company);
});
出力：
Adam is Engineer who works at Google
Sam is Manager who works at Amazon
Georgia is Designer who works at Netflix
Kate is Engineer who works at Microsoft
James is Sales who works at Amazon
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn関連記事 - JavaScript Object
- JavaScript でオブジェクトを印刷する
- JavaScript のプロパティ値で配列内のオブジェクトを検索
- JavaScript 破棄オブジェクト
- キーへの参照によるオブジェクトの値の取得
- 日付値を使用してオブジェクトの配列を単一のキーで並べ替える