Javascript 배열 필터 방법

Javascript의 filter 메서드는 배열의 얕은 복사본을 만들어 여러 조건에 따라 필터링합니다. 콜백 함수를 받아들입니다. filter 생성하는 배열은 일반적으로 원래 배열의 축소된 버전입니다. 다음은 기본적인 예입니다.

let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let filteredArray = myArray.filter((element) => {
    return (element == '🔑' || element == '🔩'))
});

console.log(filteredArray); // [ '🔑', '🔩' ]

보시다시피 filter 메서드는 해당 요소가 true 를 반환해야 하는 새로운 필터링된 배열에 요소가 있도록 허용합니다. 각 요소를 효과적으로 반복하고 테스트를 실행하여 무엇이 남아 있어야 하는지 확인합니다. 화살표 함수는 한 줄에 암시적으로 true를 반환하므로 다음과 같이 작성된 이 코드의 축소된 버전을 볼 수 있습니다.

let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let filteredArray = myArray.filter(element => element == '🔑' || element == '🔩');

console.log(filteredArray); // [ '🔑', '🔩' ]

필터 메서드 콜백 함수

언급한 대로 filter는 콜백 함수를 허용합니다. 콜백 함수는 3개의 인수로 구성됩니다.

Array.filter((element, index, array) => {
    // Filter the array
});

각각 어떤 일을 하는지 살펴보겠습니다.

요소

이것은 filter에서 검사 중인 현재 요소입니다. filter는 배열의 각 항목을 검토하여 필터링된 새 배열에 있어야 하는지 테스트합니다.

인덱스

이것은 작업 중인 배열 항목의 0부터 시작하는 인덱스입니다. 예를 들어, 배열의 첫 번째 요소를 보는 경우 0 입니다.

정렬

원래 배열로 작업을 수행하려는 경우 전체 배열입니다.

필터 메서드 내에서 배열 변경

필터는 콜백 함수를 사용하기 때문에 검사 ​​중인 원래 배열을 변경할 수 있습니다. 예를 들어 항목을 필터링할 때마다 배열에 새 항목을 푸시할 수 있습니다.

let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let filteredArray = myArray.filter((element) => {
    myArray.push('⚡️');
    return true;
});

console.log(filteredArray); // [ '⚡️', '🔎', '🔑', '🔩' ]

이미 알고 계셨겠지만 이렇게 하면 무한 루프가 생성됩니다. 다행스럽게도 reduce 에서와 마찬가지로 Javascript는 이러한 일이 발생하는 것을 허용하지 않습니다. 대신 이러한 방식으로 추가된 배열에 대한 새 요소는 무시됩니다. 그러나 기존 요소의 변형은 완전히 괜찮습니다.

let myArray = [ '⚡️', '🔎', '🔑', '🔩' ];
let filteredArray = myArray.filter((element, index) => {
    myArray[index + 1] = '⚡️';
    return (element == '⚡️');
});

console.log(filteredArray); // [ '⚡️', '⚡️', '⚡️', '⚡️' ]

개체 배열 필터링

개체 배열 필터링은 배열과 동일한 규칙을 따릅니다. . 표기법을 사용하여 배열 내 객체의 하위 속성을 필터링할 수 있습니다. 예를 들어 나이가 >18이어야 하는 age 로 다음 배열을 필터링하려면 다음과 같이 합니다.

let myArray = [ { age: 4 }, { age: 12 }, { age: 19 }, { age: 21 } ];
let filteredArray = myArray.filter((element, index) => {
    return (element.age > 18);
});
console.log(filteredArray); // [ { age: 19 }, { age: 21 } ]

검색 기준으로 어레이 필터링

filter의 일반적인 용도는 값 배열을 가져와서 검색어를 기반으로 검색하는 것입니다. 이것은 includes 또는 regex 를 사용하여 수행할 수 있습니다. 예를 들어:

let myArray = [ 'cat', 'catdog', 'dog', 'fish', 'fishcat' ]
let filteredArray = myArray.filter((element, index) => {
    return element.match(/cat/)
});
console.log(filteredArray); // ['cat', 'catdog', 'fishcat']

필터는 어레이의 얕은 복사본을 만듭니다.

filter가 원래 어레이의 새 복사본을 만드는 것처럼 보일 수 있지만 그렇지 않습니다. 실제로 filter는 원래 배열의 얕은 복사본을 만듭니다. 즉, 배열 내의 개체를 변경하면 원본도 변경됩니다. 이를 이해하기 위해 연령 예를 다시 살펴보겠습니다.

let myArray = [ { age: 4 }, { age: 12 }, { age: 19 }, { age: 21 } ];
let filteredArray = myArray.filter((element, index) => {
    return (element.age > 18);
});

console.log(filteredArray); // [ { age: 19 }, { age: 21 } ]

filteredArray[0].age = 50;
filteredArray[1] = { age: 40 };

console.log(filteredArray); // [ { age: 50 }, { age: 40 } ]
console.log(myArray); // [ { age: 4 }, { age: 12 }, { age: 50 }, { age: 21 } ]

보시다시피 filteredArray[0].age 표기법을 사용하여 필터링된 배열을 수정하면 원본도 수정됩니다. 하지만 잠시만요! filteredArray[1] = { age: 40 }는 필터링된 배열만 변경합니다. Javascript는 . 표기법을 두 배열을 모두 업데이트하는 것으로 해석하지만 대괄호 표기법[]은 필터링된 배열의 두 번째 위치에 새 값을 설정하는 것으로 해석하기 때문입니다.

이것은 혼란스러울 수 있지만 알아두면 매우 유용한 Javascript의 또 다른 단점입니다!

결론

필터 방법은 널리 사용되며 변경하기 쉬운 방법으로 특정 기준에 따라 배열의 새로운 하위 집합을 생성합니다. 원본 배열의 얕은 복사본만 만들어지므로 특정 방식으로 배열을 수정하면 원본에 영향을 미칩니다.