배열에 JavaScript의 값이 포함되어 있는지 확인
-
.indexOf()함수를 사용하여 JavaScript에서 배열에 값이 있는지 확인 -
.includes()함수를 사용하여 JavaScript에서 배열이 값을 포함하는지 확인 -
.find()함수를 사용하여 JavaScript에서 배열의 요소 찾기 -
.filter()함수를 사용하여 JavaScript에서 배열의 요소 검색 -
간단한
for루프를 사용하여 요소 검색 - 노트
종종 우리는 배열에 JavaScript의 값이 포함되어 있는지 확인하는 상황에 처해 있습니다. 검색 기능은 루프를 사용하여 기본 JavaScript 구문으로 코딩 할 수 있지만 JavaScript의 배열 검색에 사용할 수있는 내장 기능, 사용법, 반환 유형 및 동작을 아는 것이 좋습니다. 코딩이 덜 필요하므로 작업이 훨씬 쉬워집니다. 이 기능은 내장 기능을 사용하여 효율적이고 버그 발생 가능성이 적습니다. 배열에서 요소를 검색하는 방법을 살펴 보겠습니다.
.indexOf()함수를 사용하여 JavaScript에서 배열에 값이 있는지 확인
.indexOf()함수는 JavaScript에서 일반적으로 사용되는 함수입니다. 배열 또는 문자열의 요소를 검색하는 동안 잘 작동합니다.
통사론
indexOf(element, index)
매개 변수
검색 할 요소를 매개 변수로 사용합니다. 그리고 함수를 알려주는 선택적 매개 변수, 검색을 시작해야하는 인덱스 (0에서 시작). 음수 값을 제공하면 지정된 위치에서 배열의 끝부터 검색하는 것입니다.
반환 값
이 함수는 요소를 찾을 수있는 경우 배열의0에서 시작하는 검색 요소의 인덱스를 반환합니다. 그렇지 않으면-1을 반환하여 요소를 찾을 수 없음을 나타냅니다. 배열에 둘 이상의 일치 항목이있는 경우.indexOf()함수는 첫 번째 일치 항목의 인덱스를 반환합니다.
브라우저 지원
.indexOf()함수는 모든 주요 브라우저 버전에서 지원됩니다.
용법
배열에서indexOf()함수의 사용법은 다음과 같습니다.
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.indexOf('Pear'));
console.log(fruits.indexOf('Tomato'))
출력:
2
-1
검색 기능의 경우.indexOf(searchText)의 반환 유형이-1보다 큰지 확인합니다. 그렇다면 검색 결과는true가 아니면false여야합니다. 배열에 요소가 있는지 확인하기 위해 위에서 설명한 동일한 예제를 살펴 보겠습니다.
function isFruit(fruitName) {
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
if (fruits.indexOf(fruitName) > -1) {
return true;
} else {
return false;
}
}
isFruit('Pear');
isFruit('Cat');
출력:
true
false
.includes()함수를 사용하여 JavaScript에서 배열이 값을 포함하는지 확인
JavaScript의includes()함수는 주어진 요소가 배열에 있는지 여부를 확인합니다. 부울 값을 반환합니다. 따라서if조건 검사에 가장 적합합니다.
통사론
includes(keyword)
includes(keyword, index)
매개 변수
이 함수는 두 개의 매개 변수를 사용합니다. 일반적으로이 함수는.includes(searchString)형식으로 사용됩니다. searchString매개 변수는 검색하려는 요소이고index매개 변수는 검색 할 배열 인덱스를 참조합니다. index매개 변수는 선택 사항입니다.
반환 값
.includes()는searchString이 배열의 요소로 발견되면true를 반환합니다. 찾을 수없는 경우 함수는 false를 반환합니다.
브라우저 지원
.includes()함수는 Internet Explorer를 제외한 거의 모든 웹 브라우저에서 작동합니다. 따라서 프로젝트가 IE에서 지원되는 경우indexOf()함수를 사용해야 할 수 있습니다.
용법
배열에includes()를 적용하는 방법을 살펴 보겠습니다.
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.includes('Pear'));
console.log(fruits.includes('Tomato'))
출력:
true
false
includes()함수는 출력으로 부울 값을 리턴하므로if조건에서 직접 사용할 수 있습니다. 위의 예는 다음과 같이 조건부if에서 사용할 수 있습니다. includes()가 지원되지 않으므로이 코드는 IE에서 작동하지 않을 수 있습니다.
function isFruit(fruitName) {
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
if (fruits.includes(fruitName)) {
return true;
} else {
return false;
}
}
isFruit('Pear');
isFruit('Cat');
출력:
true
false
.find()함수를 사용하여 JavaScript에서 배열의 요소 찾기
요소가 배열에 있는지 확인하는 또 다른 방법은.find()함수를 사용하는 것입니다. .indexOf()및.includes()함수와 비교하여.find()는 함수를 매개 변수로 취하여 배열의 각 요소에서 실행합니다. 매개 변수 함수에서 언급 한 조건이 만족하는 첫 번째 값을 반환합니다.
통사론
.find((keyword) => {/* Some condition checks */})
.find((keyword, index) => {/* Some condition checks */})
매개 변수
Array.find()함수는 함수를 입력 매개 변수로 사용합니다. 일반적으로 화살표 함수를 매개 변수로 사용합니다. 그리고 이러한 화살표 기능에는item => item > 21과 같은 조건 검사가 포함될 수 있습니다. 또 다른 선택적 매개 변수는 현재 반복 색인을 나타내는index입니다. .find()는 배열의 각 요소에서 화살표 함수를 실행합니다. 따라서 추가 조건 검사를 지원하기 위해 화살표 함수에 대한 인수로 반복자를 제공합니다.
반환 값
.find()는 JavaScript의indexOf(),includes()함수와 약간 다릅니다. 발견되면 요소의 값을 반환하고 그렇지 않으면 함수는 정의되지 않은 것을 반환합니다.
브라우저 지원
.includes()함수와 마찬가지로.find()는 Internet Explorer를 제외한 거의 모든 웹 브라우저에서 작동합니다. 따라서 Array 작업에 이러한 기능을 사용하기 전에 프로젝트가 IE에서 지원되지 않는지 확인해야합니다.
용법
어레이에서 다음 사용법을 참조하십시오.
let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.find(i => i > 20));
console.log(age.find(i => i > 21))
출력:
21
43
age.find(i => i > 21)의 출력에 약간 놀랐을 수 있습니다.age에서21의 다음으로 높은 숫자 인23대신43을 반환하기 때문입니다. 정렬. .find()함수는 배열 함수에 언급 된 조건을 충족하는 다음 요소를 시간순으로 반환합니다. if블록이있는 요소를 검색하려면 다음 코드를 사용할 수 있습니다.
function findPeerAge(myAge) {
let age = [21, 43, 23, 1, 34, 12, 8];
if (age.find(i => (i === myAge))) {
return true;
} else {
return false;
}
}
findPeerAge(23);
findPeerAge(40);
true
false
.filter()함수를 사용하여 JavaScript에서 배열의 요소 검색
.filter()함수는 주로 배열 처리 작업에 사용됩니다. 특히 필터링 요소, 기준을 충족하는 경우 배열에서 제외됩니다. 인수로 전달 된 함수에 정의 된 기준을 충족하는 요소의 배열을 반환합니다.
통사론
Array.find()와 동일한 구문을 따릅니다.
.filter((keyword) => {/* Some condition checks */})
.filter((keyword, index) => {/* Some condition checks */})
매개 변수
Array.filter()함수는 인라인 함수 또는 화살표 함수를 매개 변수로받습니다. 화살표 기능은 필터 기준을 유지합니다. .filter()함수는 배열의 각 요소에서 화살표 함수를 실행하고 화살표 함수에 언급 된 조건을 충족하는 요소를 반환합니다. 화살표 기능은키워드를 입력으로, 현재 반복을인덱스로 갖습니다.
반환 값
지금까지 살펴본 배열 검색 함수와 달리.filter()는 화살표 함수에 언급 된 조건을 충족하는 요소를 포함하는 배열을 반환합니다. 요소가 발견되면 반환 된 배열에 필수 요소가 포함되고, 그렇지 않으면 함수에서 빈 배열이 반환됩니다.
브라우저 지원
.filter()함수는 Internet Explorer를 포함한 모든 브라우저에서 지원됩니다. 따라서 예상되는 브라우저 지원을 방해하지 않고.filter()함수를 사용할 수 있습니다.
사용법 :이 기능의 사용법은 다음과 같습니다
let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.filter(i => i > 20));
console.log(age.filter(i => i > 21));
출력:
[21, 43, 23, 34]
[43, 23, 34]
결과에서 볼 수 있듯이filter()함수는 배열을 반환합니다. 배열에서 요소를 검색해야하는 경우 다음 코드 샘플에 설명 된대로filter()함수를 사용할 수 있습니다. filter()함수에 의해 반환 된 배열의.length속성을 사용하여 요소를 찾을 수 있는지 여부를 결정합니다. 함수가 빈 배열을 반환하면 검색 키워드를 찾을 수 없음을 나타냅니다.
function findAge(myAge) {
let age = [21, 43, 23, 1, 34, 12, 8];
if (age.filter(i => (i === myAge)).length) {
return true;
} else {
return false;
}
}
findAge(23);
findAge(40);
출력:
true
false
간단한for루프를 사용하여 요소 검색
JavaScript의 기본 메소드,if조건 및for루프를 사용하여 배열에서 요소를 찾을 수 있습니다. 다음 코드는 요소가 발견되면 true를 반환하고 그렇지 않으면 false를 반환합니다. 동일한 요소가 두 개 이상 발생하는 경우 함수는 첫 번째 일치 항목 만 반환합니다.
function findAge(myAge, ageAry) {
let elementFound = false;
for (let i = 0; i < ageAry.length; i++) {
if (ageAry[i] === myAge) {
return true;
}
}
return elementFound;
}
let srcArray = [21, 43, 23, 1, 34, 12, 8];
findAge(23, srcArray);
findAge(40, srcArray);
findAge(8, srcArray);
findAge(23, srcArray);
출력:
true
false
true
true
노트
.indexOf(),.includes()함수는 정확히 일치하는 요소를 찾습니다. 부분 문자열 검색에는 사용할 수 없습니다. 검색 매개 변수로 요소의 일부를 제공하는 것이 작동하지 않음을 의미합니다.Array.filter()및Array.find()함수를 사용하여 검색 기준을 사용자 정의 할 수 있으므로 부분 요소 검색을 구현할 수 있습니다.