JavaScript에서 여러 조건 필터링

1. JavaScript에서 여러 조건 필터링
2. 전통적인 방법 사용
3. 필터 방법 사용

오늘의 게시물에서는 JavaScript의 기존 및 filter 메서드를 사용하여 여러 조건으로 배열을 필터링하는 방법을 알려줍니다.

JavaScript에서 여러 조건 필터링

배열은 고정 숫자 키와 동적 값이 있는 JavaScript 객체 유형입니다. JavaScript는 이러한 배열 요소에 액세스하고 조작하기 위한 몇 가지 기본 제공 메서드를 제공합니다.

filter() 메소드는 제공된 함수에 의해 구현된 조건/테스트를 통과하는 모든 요소가 있는 원래 배열에서 새 배열을 생성합니다.

통사론:

filter(callbackFn)

filter 메소드는 callbackFn을 매개변수로 받아들입니다. 이 함수는 배열의 각 요소를 테스트하는 술어입니다.

요소를 강제로 true 또는 false로 유지하는 새 배열을 반환합니다.

콜백 함수는 세 개의 인수로 호출됩니다.

1. element는 배열에서 처리되는 현재 요소입니다.
2. index는 배열에서 처리 중인 현재 요소의 인덱스입니다.
3. filter()가 호출된 array.

테스트를 통과한 요소가 포함된 새 배열이 반환됩니다. 테스트를 통과한 요소가 없으면 빈 배열이 반환됩니다.

filter()는 배열의 각 요소에 대해 제공된 callbackFn 함수를 한 번 호출하고 callbackFn이 true를 적용하는 값을 반환하는 모든 값의 새 배열을 생성합니다.

‘callbackFn’은 할당된 값이 있는 배열 인덱스에 대해서만 호출됩니다. 삭제되었거나 할당된 적이 없는 인덱스에는 호출되지 않습니다.

callbackFn 테스트에 실패한 어레이 요소는 건너뛰고 새 어레이에 포함되지 않습니다. filter()에 대한 문서에서 자세한 정보를 찾으십시오.

전통적인 방법 사용

const filter = {
  address: 'India',
  name: 'Aleena'
};
const users = [
  {name: 'John Doe', email: 'johndoe@mail.com', age: 25, address: 'USA'},
  {name: 'Aleena', email: 'aleena@mail.com', age: 35, address: 'India'},
  {name: 'Mark Smith', email: 'marksmith@mail.com', age: 28, address: 'England'}
];

const filteredUsers = users.filter((item) => {
  for (var key in filter) {
    if (item[key] === undefined || item[key] != filter[key]) return false;
  }
  return true;
});

console.log(filteredUsers);

위의 예에서 원하는 속성을 가진 filter 객체를 설명했습니다. 원하는 속성이 지정된 배열에 있는지 확인하기 위해 filter 메서드에 콜백 함수를 정의했습니다.

원하는 속성이 없으면 false가 반환됩니다. 그렇지 않으면 true가 반환됩니다.

이 접근 방식은 filter 객체가 동적으로 생성될 때 유용합니다. filter 개체가 정적이면 아래 && 조건을 사용하여 개체를 필터링할 수 있습니다.

JavaScript를 지원하는 모든 브라우저에서 위의 코드 조각을 실행해 보십시오. 아래에 결과가 표시됩니다.

필터 방법 사용

const filteredUsers = users.filter(
    obj => obj.name == filter.name && obj.address == filter.address);
console.log(filteredUsers);

출력:

[{
  address: "India",
  age: 35,
  email: "aleena@mail.com",
  name: "Aleena"
}]

데모