JavaScript のプロパティ値で配列内のオブジェクトを検索
-
find()メソッドを使用してプロパティ値で配列内のオブジェクトを検索する -
filter()メソッドを使用してプロパティ値で配列内のオブジェクトを検索する -
JavaScript
forループを使用してプロパティ値で配列内のオブジェクトを検索 -
JavaScript
for...inループを使用してプロパティ値で配列内のオブジェクトを検索
配列は値の順序付けられたリストを参照し、それぞれがインデックスによって指定された要素として知られています。 JavaScript 配列は、文字列、null、ブール値などの混合型のさまざまな値を保持できます。配列のサイズは、自動拡張および動的な場所を指定するために必要ありません。
配列オブジェクトについて考えると、複数の値が 1つの変数に格納され、同じデータ型の要素の固定サイズの順次コレクションが格納されます。 配列コンストラクターで単一の数値パラメーターを指定する場合、ユーザーは配列の初期長を設定する必要があります。
許容される配列の最大長は 4,294,967,295 です。 配列はデータ コレクションを保持しますが、多くの場合、配列を同様の型の変数のコレクションと考える方が便利です。
また、JavaScript 配列は、多くのコーディングを行わなくてもプログラムを効率的に実行するのに役立つさまざまなメソッドとプロパティで構成されています。
プロパティ値によって配列内のオブジェクトを検索する場合、JavaScript でさまざまな実装を使用できます。
find() メソッドを使用してプロパティ値で配列内のオブジェクトを検索する
find() メソッドを使用して、JavaScript のオブジェクトの配列内のオブジェクトをそのプロパティ値で見つけることができます。 ここで、find() メソッドは、指定されたテスト関数を満たす最初の配列要素を返します。
テスト関数を満たさない値は、undefined を返します。 以下のコードは、JavaScript オブジェクトの配列で ID によってオブジェクトを検索する方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Object In Array By Property Value</title>
</head>
<body>
<script>
var sampleArray = [
{"id": 1, "animal": "Dog"},
{"id": 2, "animal": "Cat"},
{"id": 3, "animal": "Bird"},
{"id": 4, "animal": "Fish"}
];
//getting the object by its id
var output = sampleArray.find(object => object.id === 3);
//outputs the animal to be found
document.write(output.animal);
</script>
</body>
</html>
const キーワードは、var の代わりに配列を宣言する一般的な方法として使用されることがあります。
ここで、ユーザーは指定された ID を持つ動物を見つける必要があり、出力として、動物はユーザーによって提供された ID (3) に一致する Bird でした。
出力：
必要に応じて、次のコードで findIndex() メソッドを使用して、配列内の一致したオブジェクトのインデックスを見つけることができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Javascript Find Object In Array By Property Value</title>
</head>
<body>
<script>
var sampleArray = [
{"id": 1, "animal": "Dog"},
{"id": 2, "animal": "Cat"},
{"id": 3, "animal": "Bird"},
{"id": 4, "animal": "Fish"}
];
//getting the index of the object that matches the id
var objectIndex = sampleArray.findIndex(object => object.id === 3);
//getting the output as the index and the animal to be found
document.write(objectIndex + "<br>");
document.write(sampleArray[objectIndex].animal);
</script>
</body>
</html>
ここで、ユーザーは指定された ID とインデックスで動物を見つける必要があります。 出力として、見つかった動物は Bird で、そのインデックスは 2 で、ユーザーが提供した ID (3) と一致します。
出力：
filter() メソッドを使用してプロパティ値で配列内のオブジェクトを検索する
filter() メソッドを使用して、テスト関数を通過する要素で満たされた新しい配列を作成することもできます。 要素が null の場合、filter() メソッドは関数を実行せず、元の配列に変更を加えません。
以下のコードは、JavaScript オブジェクトの配列で ID によってオブジェクトを検索する方法を示しています。
var animals = [
{animalName: 'Dog', ability: 'Bark'}, {animalName: 'Cat', ability: 'Meow'},
{animalName: 'Bird', ability: 'Fly'}, {animalName: 'Fish', ability: 'Swim'}
];
var animalAbility = animals.filter(function(animal) {
return animal.ability == 'Bark';
});
console.log(animalAbility);
ここで、ユーザーは、配列から取得するために必要な関連する ability を入力することにより、必要な出力を取得できます。
出力：
JavaScript for ループを使用してプロパティ値で配列内のオブジェクトを検索
まず、オブジェクトの配列を宣言します。各オブジェクトには id プロパティと name プロパティがあります。 プログラムの実行に関しては、配列、オブジェクト キー、および値を使用して関数が作成されます。
for ループは、配列内のオブジェクトを反復処理するために使用されます。 各オブジェクトは、割り当てられたキーと等値演算子 (===) を使用した値でチェックされます。
一致する場合、プログラムはオブジェクトを返します。 それ以外の場合、出力として null を返します。
以下のコードは、JavaScript オブジェクトの配列でキーによってオブジェクトを検索する方法を示しています。 このコードでは、配列メソッドを使用して配列オブジェクトを検索していません。
let animals =
[
{'id': 1, 'animal': 'Dog'}, {'id': 2, 'animal': 'Cat'},
{'id': 3, 'animal': 'Bird'}, {'id': 4, 'animal': 'Fish'}
]
// declaration of the function and iteration through the objects
function getObjectByKey(array, key, value) {
for (var c = 0; c < array.length; c++) {
if (array[c][key] === value) {
return array[c];
}
}
return null;
} console.log(getObjectByKey(animals, 'animal', 'Fish'))
ユーザーは、関連するキーを提供することで、必要な出力を取得できます。
出力：
JavaScript for...in ループを使用してプロパティ値で配列内のオブジェクトを検索
必要に応じて、for...in ループを使用して、オブジェクトのすべてのプロパティ値を反復処理しながら、プロパティ値で配列オブジェクトを見つけることができます。
次のコードは、for...in ループを使用してオブジェクトを検索する方法を示しています。
var animals = [
{'id': 1, 'animal': 'Dog'}, {'id': 2, 'animal': 'Cat'},
{'id': 3, 'animal': 'Bird'}, {'id': 4, 'animal': 'Fish'}
];
for (const c in animals) {
if (animals[c].id == 2) {
console.log(animals[c]);
}
}
ここで、ユーザーは必要に応じて関連する ID を指定することで出力を取得できます。
出力：
さらなる実装では、プロパティの値によってオブジェクトの配列から JavaScript オブジェクトを取得するための他のメソッドが存在します。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.