JavaScript에서 속성 값으로 배열에서 객체 찾기
-
find()메서드를 사용하여 속성 값으로 배열에서 객체 찾기 -
filter()메서드를 사용하여 속성 값으로 배열에서 객체 찾기 -
JavaScript
for루프를 사용하여 속성 값으로 배열에서 개체 찾기 -
JavaScript
for...in루프를 사용하여 속성 값으로 배열에서 개체 찾기
배열은 각각 인덱스로 지정된 요소로 알려진 정렬된 값 목록을 나타냅니다. JavaScript 배열은 문자열, null 또는 부울과 같은 혼합 유형의 서로 다른 값을 보유할 수 있으며 배열의 크기는 자동 증가 및 동적 위치를 지정하는 데 필요하지 않습니다.
배열 객체를 고려할 때 단일 변수에 여러 값을 저장하고 동일한 데이터 유형을 가진 요소의 고정 크기 순차 컬렉션을 저장합니다. 배열 생성자로 단일 숫자 매개변수를 지정할 때 사용자는 배열의 초기 길이를 설정해야 합니다.
허용되는 어레이의 최대 길이는 4,294,967,295입니다. 배열이 데이터 컬렉션을 보유하고 있지만 배열을 유사한 유형의 변수 컬렉션으로 생각하는 것이 더 도움이 되는 경우가 많습니다.
또한 JavaScript 배열은 많은 코딩 없이 프로그램을 효율적으로 실행하는 데 도움이 되는 다양한 메서드와 속성으로 구성됩니다.
속성 값으로 배열에서 개체를 찾을 때 JavaScript에서 다른 구현을 사용할 수 있습니다.
find() 메서드를 사용하여 속성 값으로 배열에서 객체 찾기
find() 메소드를 사용하여 속성 값으로 JavaScript의 객체 배열에서 객체를 찾을 수 있습니다. 여기서 find() 메서드는 주어진 테스트 기능을 만족하는 제공된 첫 번째 배열 요소를 반환합니다.
테스트 기능을 수행하지 않는 모든 값은 정의되지 않음을 반환합니다. 아래 코드는 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와 색인을 가진 동물을 찾아야 합니다. 출력으로 발견된 동물은 사용자가 제공한 id(3)와 일치하는 인덱스가 2인 Bird였습니다.
출력:
filter() 메서드를 사용하여 속성 값으로 배열에서 객체 찾기
또한 filter() 메서드를 활용하여 테스트 기능을 통과하는 요소로 채워진 새 배열을 만들 수 있습니다. filter() 메서드는 요소가 null이고 원래 배열을 변경하지 않는 경우 함수를 실행하지 않습니다.
아래 코드는 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);
여기에서 사용자는 어레이에서 가져오는 데 필요한 관련 능력을 입력하여 필요한 출력을 얻을 수 있습니다.
출력:
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.