filter

filter란?

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

array.filter(callback(element, index, array), thisArg)

• callback : 각 요소를 시험할 함수 (true이면 요소를 유지, false이면 요소를 버림)
• element : 처리할 현재 요소
• index : 처리할 요소의 인덱스
• array : filter를 호출한 배열
• thisArg : callback을 실행할 때 this로 사용될 값

특징

1. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환
2. true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열
3. callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출
4. 호출되는 배열을 변화시키지 않음

기본예제

const filtered = [12, 5, 8, 130, 44].filter((value) => value >= 10);
console.log(filtered);

결과

[12, 130, 44]

json에서 유효하지 않은 값 필터링하기

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

const invalidEntries = 0;

//숫자를 찾는 함수
function isNumber(obj) {
  //undefined가 아니고, typeof가 number이고, 숫자가 아닌것이 아닌
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

//id를 찾아 filter하는 함수
function filterByID(item) {
  //id가 숫자로 이루어져 있고, 0이 아니라면 true를 반환
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  }
  //false일때는 invalidEntries에 +1
  invalidEntries++;
  return false;
}

//arr의 id를 찾아 filter
var arrByID = arr.filter(filterByID);

console.log('Filtered Array\n', arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log('Number of Invalid Entries = ', invalidEntries);
// Number of Invalid Entries(잘못된 항목수) = 5

결과

Filtered Array
[{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

배열 내용 검색 (이해안감)

• toLowerCase() : 문자열을 소문자로 변환
• indexOf() : 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

//검색 조건에 따른 배열 필터링(쿼리)
function filterItems(query) {
  return fruits.filter(function(el) {
    
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

결과

['apple', 'grapes']['banana', 'mango', 'orange']