JavaScript Filter() 메서드를 사용하는 JavaScript 필터 배열 필터 배열

배열의 크기를 줄이기 위해 원하지 않는 요소를 필터링하는 것이 재미있습니까? JavaScript 배열 필터 방식을 사용하면 더욱 재미있습니다.

지난 블로그 게시물에서 JavaScript의 배열 맵 방법에 대해 썼습니다. 당신이 그것을 놓친 경우, 이것은 . 여기의 예에서 배열의 요소에 적용된 콜백 함수에서 논리 표현식을 사용할 수 있음을 확인했습니다. 아래 코드 스니펫은 다음과 같습니다.

    const numbers = [4, 9, 36, 49];

    let oddSquareRoots = numbers.map((num) => {
       if(num % 2 != 0) {
           return Math.sqrt(num)     
       }
       return num;
    })

    console.log(oddSquareRoots);

이것이 가능하지만 이상적이지는 않습니다. 보다 효율적인 방법은 필터 방법을 사용하는 것입니다. 이제 질문에 답해 보겠습니다. 필터 방법은 무엇이며 어떻게 사용할 수 있습니까?

필터 방법 이해

MDN 문서에 따르면:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

예제를 사용하여 이것을 더 단순화합시다.

난수 배열(예: 사람들의 연령)이 있고 특정 숫자(예: 18) 이상의 숫자만 필요한 경우. 일반적인 for 루프를 사용하여 이 작업을 수행하는 방법은 무엇입니까?

    const ages = [11, 34, 8, 9, 23, 51, 17, 40, 14];

    let olderThan18 = [];

    for (let i = 0; i < ages.length; i++) {
        if(ages[i] > 18){
            olderThan18.push(ages[i])
        }
    }

    console.log(olderThan18); // [34, 23, 51, 40]

이것은 아래와 같이 필터 방법을 사용하면 훨씬 간단합니다.

    const ages = [11, 34, 8, 9, 23, 51, 17, 40, 14];

    let olderThan18 = ages.filter((age) => age > 18);

    console.log(olderThan18); //[34, 23, 51, 40]

추신: 예제에서는 화살표 기능을 사용합니다. 구문을 이해하지 못하는 경우 해당 구문을 참조하십시오.

for 루프 없이도 동일한 결과를 얻을 수 있으며 사용하기가 훨씬 쉽습니다.

필터 메서드와 함께 사용하기 전에 콜백 함수를 선언하기로 결정했다면 다음과 같이 할 수 있습니다.

    const ages = [11, 34, 8, 9, 23, 51, 17, 40, 14];
    const isOlderThan18 = (age) => age > 18;

    let olderThan18 = ages.filter(isOlderThan18);

    console.log(olderThan18); // [34, 23, 51, 40]

필터 메서드의 구문을 살펴보겠습니다.

Filter() 메서드의 구문

필터 메서드의 기본 구문은 다음과 같습니다.

    let newArray = array.filter(callback);

어디

newArray - 반환되는 새 배열

배열 - 필터 메서드가 호출되는 배열

callback - 배열의 각 요소에 적용되는 콜백 함수

콜백 함수는 세 개의 인수를 사용할 수 있습니다.

요소 - 처리 중인 현재 요소

index - 처리 중인 현재 요소의 인덱스

배열 - 필터가 호출된 원래 배열

이러한 인수를 염두에 두고 다음과 같이 구문을 작성할 수도 있습니다.

   let newArray = array.filter(callback(element, index, array));

   or

   let newArray = array.filter((element, index, array) => {
        //filter 'em elements
    })

다음은 필터 방법에 대해 주의할 사항입니다.

새 배열을 반환합니다.

호출된 원래 배열을 변경하지 않습니다. 즉, 원래 배열이 그대로 유지됩니다.

필터 메서드로 처리되는 요소의 범위는 첫 번째 호출 전에 설정됩니다. 맵이 시작된 후 새 요소가 배열에 추가되면 콜백에서 처리하지 않습니다.

필터 방법을 사용하는 경우

배열에서 필요한 조건을 충족하는 항목만 원할 때.

필터 방법 사용의 예

다음은 필터 방법으로 수행할 수 있는 작업의 두 가지 예입니다.

예 1: 객체 배열 필터링

여러 국가가 있고 특정 대륙에 있는 국가만 원하는 경우. 이것은 배열 필터 방법을 사용하여 이를 수행하는 방법의 예입니다.

    const countries = [
        { name: 'Nigeria', continent: 'Africa'},
        { name: 'Nepal', continent: 'Asia'},
        { name: 'Angola', continent: 'Africa'},
        { name: 'Greece', continent: 'Europe'},
        { name: 'Kenya', continent: 'Africa'},
        { name: 'Greece', continent: 'Europe'}
    ]

    let asianCountries = countries.filter(country => {
        return country.continent === 'Asia';
    })

    console.log(asianCountries); // [{name: "Nepal", continent: "Asia"}]

예 2: 배열에서 특정 문자 검색

단어 배열이 주어지고 어떤 단어에 특정 문자가 포함되어 있는지 확인하려고 합니다. 예를 들어, 특정 알파벳을 함께 포함하는 여성 이름을 원할 경우 다음과 같이 할 수 있습니다.

    const names = ['Victoria', 'Pearl', 'Olivia', 'Annabel', 'Sandra', 'Sarah'];
    const filterItems = (letters) => {
        return names.filter(name => name.indexOf(letters) > -1);
    } 

    console.log(filterItems('ia')); // ["Victoria", "Olivia"]

결론

따라서 이 게시물에서 JavaScript Filter 메서드가 배열의 요소를 필터링하는 것이 얼마나 쉬운지 보았습니다.

이 게시물의 시작 부분에 언급된 예를 기억하십니까? 필터 방법을 사용하여 동일한 결과를 얻을 수 있습니까?

질문이나 추가 사항이 있습니까? 댓글을 남겨주세요.

읽어 주셔서 감사합니다 :)

뻔뻔한 플러그🙈

나에 대해 더 알고 싶다면 my website 링크를 참조하세요.