>  기사  >  웹 프론트엔드  >  자바스크립트 필터 구현

자바스크립트 필터 구현

PHPz
PHPz원래의
2023-05-16 11:53:07460검색

Javascript에는 많은 내장 함수가 있는데, filter()가 그 중 하나입니다. 그 기능은 배열에서 기준을 충족하는 요소를 필터링하고 새 배열을 반환하는 것입니다.

filter() 구문은 다음과 같습니다.

array.filter(function(currentValue, index, arr), thisValue)

매개변수 설명:

  • currentValue: 배열에서 처리 중인 현재 요소
  • index: 배열에서 현재 요소의 첨자
  • arr: 배열 beingprocessing
  • thisValue(선택 사항): 객체가 함수(예: 함수 실행 컨텍스트)로 실행될 때 이 값을 다음과 같이 사용합니다.

filter() 메서드는 함수를 매개 변수로 허용하며, 이는 현재 요소의 세 가지 매개 변수를 허용합니다. , 현재 요소 및 전체 배열의 인덱스입니다. 함수는 현재 요소가 조건을 충족하는지 여부를 나타내는 부울 값을 반환해야 합니다. true가 반환되면 해당 요소는 새 배열에 유지되고, 그렇지 않으면 필터링됩니다.

1부터 10까지의 정수를 저장하는 배열이 있다고 가정하고 예를 들어보겠습니다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

이제 5보다 크거나 같은 모든 요소를 ​​필터링하려고 합니다. 이는 filter() 메서드를 통해 달성할 수 있습니다.

const result = numbers.filter(function(number) {
  return number >= 5;
});

console.log(result); // 输出 [5, 6, 7, 8, 9, 10]

위 코드에서 filter() 함수는 반환 값이 true 또는 false인 함수를 받습니다. 이 함수에서는 현재 요소가 5보다 크거나 같으면 true가 반환됩니다. 그렇지 않고 현재 요소가 5보다 작으면 false가 반환됩니다. 마지막으로 기준을 충족하는 요소, 즉 5보다 크거나 같은 요소는 그대로 유지되어 새로운 배열 형태로 반환됩니다.

함수를 정의하는 것 외에도 화살표 함수를 간략하게 사용할 수도 있습니다.

const result = numbers.filter(number => number >= 5);

console.log(result); // 输出 [5, 6, 7, 8, 9, 10]

filter() 메서드는 배열의 객체에 사용할 수도 있습니다. 여러 사람에 대한 정보를 저장하는 배열이 있다고 가정해 보겠습니다.

const people = [
  { name: 'Lucas', age: 25 },
  { name: 'Emma', age: 21 },
  { name: 'Tom', age: 30 },
  { name: 'Jane', age: 18 },
];

이제 25세 이상의 사람들을 필터링하고 싶습니다. 이는 filter() 메서드를 통해 달성할 수 있습니다:

const result = people.filter(function(person) {
  return person.age >= 25;
});

console.log(result); // 输出 [{ name: 'Lucas', age: 25 }, { name: 'Tom', age: 30 }]

마찬가지로 화살표 함수 약어를 사용할 수도 있습니다:

const result = people.filter(person => person.age >= 25);

console.log(result); // 输出 [{ name: 'Lucas', age: 25 }, { name: 'Tom', age: 30 }]

실제 개발에서는 검색과 같은 조건을 충족하는 데이터를 필터링하는 데 filter() 메서드가 자주 사용됩니다. , 필터링, 분류 등을 현장에서 수행합니다. 간단하고 사용하기 쉬우며, 배열 요소를 빠르게 필터링할 수 있는 것은 개발에 없어서는 안 될 방법 중 하나라고 할 수 있습니다.

위 내용은 자바스크립트 필터 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.