JavaScript의 filter() 메소드

filter()는 무엇에 사용됩니까?

때로는 배열에 약간의 변경을 가하고 싶을 수도 있습니다. 그러기 위해서는 javascript에서 배열 메서드를 사용해야 합니다. filter() 메서드는 그 중 하나입니다. 이 방법은 배열을 필터링하는 데 사용됩니다. 주어진 배열을 복사하고 실제 배열에서 필터링된 요소를 사용하여 새 배열을 만듭니다. 배열이 있고 배열에서 특정 요소만 반환되어야 한다고 가정합니다. filter()를 사용하여 이를 수행하는 방법을 살펴보겠습니다.

filter() 메서드를 사용하는 방법?

메서드를 사용하기 전에 구문을 살펴보겠습니다.

구문은

filter((element) => { /* … / } )
or
filter(function(element) { / … */ })

첫 번째 예를 들어보겠습니다. [1, 2, 3, 4, 5, 6, 7, 8, 9]와 같은 배열이 있고 홀수만 얻고 싶다고 가정합니다.

   var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
   const oddArr = arr.filter(element => element%2 == 0);

콘솔이나 페이지에서 oddArr을 출력하면 새 배열에 홀수만 포함되어 있는 것을 볼 수 있습니다.

주목 !

filter() method doesn't change the original array.
filter() method creates a new array to fill with the selected elements by given condition.

문자열 유형 요소를 포함하는 배열에 filter() 메서드를 사용할 수도 있습니다.

var format = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;

const words = ['spray', '!limit#3', 'racing', '^b4n4n4*', '&basketball&', 'my$bird', 'animals', 'it_is_good_to_us', 'specialCars', 'sweet fruites']

const formattedArray = words.filter(w => w.length >= 6 && format.test(w) == false);

console.log(formattedArray) // [ 'racing', 'animals', 'specialCars' ]

다음 예제에서는 정의되지 않은 항목을 포함하지 않는 배열을 만듭니다. 이를 위해 함수를 매개변수로 전달하고 화살표 함수 없이 사용하는 방법을 살펴보겠습니다.

const arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  {},
  { id: null },
  { id: NaN },
  { id: 'undefined' },
];

function catchUndefined(element) {
    if (element.id !== 0 && Number.isFinite(element.id) && element.id > 0) {
        return true;
    } else {
        return false;   
    }
}
const filteredArrById = arr.filter(catchUndefined);
console.log(filteredArrById);

산출

[ { id: 15 }, { id: 3 }, { id: 12.2 } ]

또 다른 예는 다시 숫자에 관한 것입니다. 이번에는 주어진 배열에서 소수를 찾을 것입니다.

function isPrime(number) {
    if (number > 1) {
        for (let i = 2; i < number; i++) {
            if (number % i != 0) {
                continue;
            } else {
                return false;
            }
        }
    } else {
        return false;
    }
    return true;
}

const numbers = [3, 8, 2, 5, 4, 6, 11, 9, 7, 1, 24, 21, 17, -5, -7, -9]
const primeNumbers = numbers.filter(isPrime);
console.log(primeNumbers); // [ 3, 2, 5, 11, 7, 17 ]

위의 코드를 실행하면 소수 목록이 표시됩니다. 어쨌든 문자열 유형 목록을 사용하여 다른 인스턴스를 만들어 봅시다.

const cars = ["BWM", "Audi", "Mercedes", "Volvo", "Subaru", "Volkswagen", "Hyundai", "Rolce Royce", "Bentley", "Nissan"];

query = "r"; // something else you want
const filteredByQuery = cars.filter(element => element.toLowerCase().trim().includes(query.toLowerCase().trim()));
console.log(filteredByQuery);

위의 코드에서 주어진 쿼리에 따라 적절한 요소를 찾습니다. 전체 목록에서 검색하고 반환 항목에는 쿼리 문자열이 포함됩니다.

여태까지는 그런대로 잘됐다 !
다양한 예제를 만들어 자세히 알아보고 이러한 배열 메서드 map() 및 forEach()를 살펴볼 수도 있습니다.

읽어주셔서 정말 감사합니다.