반응형
[js] Array.prototype.filter() 메소드를 사용하여 여러가지 상황에서 사용할 수 있는 필터링 예제
Array.prototype.filter()란?
filter() 메소드는 함수에 의해 구현된 테스트를 통과하는 배열의 요소로만 필터링된 원 배열의 일부에 대한 얕은 복사본을 만든다.
문법 (arrow 함수만 )
filter((element) => { /* … */ })
filter((element, index) => { /* … */ })
filter((element, index, array) => { /* … */ })
Array.prototype.filter() 예제
1. 배열 요소의 길이가 6보다 큰 배열을 출력하는 예제
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
출력값
Array ["exuberant", "destruction", "present"]
2. 특정 숫자보다 작은 값을 제외하는 필터링 예제
function isBigEnough(value) {
return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
위 예제에서는 filter()를 사용하여 값이 10보다 작은 모든 요소가 제거된 필터링된 배열을 만든다.
출력값
[12, 130, 44]
3. 배열에서 모든 소수 찾기
const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
function isPrime(num) {
for (let i = 2; num > i; i++) {
if (num % i === 0) {
return false;
}
}
return num > 1;
}
console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]
위 예제는 배열의 모든 소수를 반환한다.
4. JSON에서 유효하지 않은 항목 필터링하는 예제
const arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{},
{ id: null },
{ id: NaN },
{ id: "undefined" },
];
let invalidEntries = 0;
function filterByID(item) {
if (Number.isFinite(item.id) && item.id !== 0) {
return true;
}
invalidEntries++;
return false;
}
const arrByID = arr.filter(filterByID);
console.log("Filtered Array =", arrByID);
console.log("Number of Invalid Entries =", invalidEntries);
위 예제에서는 filter()를 사용하여 0이 아닌 숫자 ID를 가진 모든 요소로 필터링된 JSON을 생성한다.
출력값
Filtered Array = [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
Number of Invalid Entries = 5
5. 배열에서 검색
const fruits = ["apple", "banana", "grapes", "mango", "orange"];
/**
* Filter array items based on search criteria (query)
*/
function filterItems(arr, query) {
return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()));
}
console.log(filterItems(fruits, "ap"));
console.log(filterItems(fruits, "an"));
위 예제에서는 filter()를 사용하여 검색 기준(단어 포함여부)에 따라 배열 내용을 필터링한다.
출력값
['apple', 'grapes']
['banana', 'mango', 'orange']
6. 희소 배열에서 filter() 사용
console.log([1, , undefined].filter((x) => !x));
console.log([1, , undefined].filter((x) => x !== 2));
위 예제에서 filter()는 빈 슬롯을 건너뛴어 ' '가 출력이 되지 않는 것을 알 수 있다.
출력값
[undefined]
[1, undefined]
7. 배열이 아닌 객체에서 filter() 호출
const arrayLike = {
length: 3,
0: "a",
1: "b",
2: "c",
};
console.log(Array.prototype.filter.call(arrayLike, (x) => x <= "b"));
위 예제는 filter() 메서드는 this의 길이 속성을 읽은 다음 각 정수 인덱스에 액세스한다.
출력값
[ 'a', 'b' ]
8. 초기 배열에 영향이 갈 때(수정, 추가 및 삭제)
// 각 단어 수정
let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const modifiedWords = words.filter((word, index, arr) => {
arr[index + 1] += " extra";
return word.length < 6;
});
console.log(modifiedWords);
// 길이 6 아래에 세 개의 단어가 있지만 extra가 추가되었으므로 하나가 반환된다.
// ["spray"]
// 새 단어 추가
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const appendedWords = words.filter((word, index, arr) => {
arr.push("new");
return word.length < 6;
});
console.log(appendedWords);
// 이제 'words' 자체에 문자 길이가 6 미만인 단어가 훨씬 많아졌음에도 불구하고 3개만 조건에 맞는다.
// ["spray" ,"limit" ,"elite"]
// 단어 삭제
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const deleteWords = words.filter((word, index, arr) => {
arr.pop();
return word.length < 6;
});
console.log(deleteWords);
// 필터가 도달하기 전에 'words'에서 제거되었기 때문에 'elite'는 추가되지 않는다.
// ["spray" ,"limit"]
위 예제에서는 배열이 수정될 때 필터 메서드의 동작을 테스트한다.
출력값
["spray"]
["spray" ,"limit" ,"elite"]
["spray" ,"limit"]
반응형
'언어 > Javascript, Typescript' 카테고리의 다른 글
[js, Next.js] 웹페이지 접속기기 종류 체크(모바일, 웹) (0) | 2023.04.06 |
---|---|
[TypeScript] Object(객체)를 입력받아 values의 길이가 너무 긴 것을 "[values 글자 수 제한] + ... "로 바꾸기 (0) | 2023.04.05 |
AJAX란?, AJAX사용방법 (0) | 2023.03.29 |
[js] 현재 페이지 URL 관련 정보를 가져오기 (0) | 2023.03.28 |
[js] 객체안에 함수넣기 (0) | 2023.03.27 |
댓글