728x90
반응형

Array.prototype.filter()

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

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

 


 

작은 값 걸러내기

값이 10 이하인 모든 요소가 제거된 걸러진 배열을 만들기 위해 filter()를 사용

function isBigEnough(value) {
  return value >= 10;
}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered 는 [12, 130, 44]

 


 

JSON에서 무효한 항목 거르기

0이 아닌, 숫자 id인 모든 요소의 걸러진 json을 만들기 위해 filter()를 사용

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

var invalidEntries = 0;

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

function filterByID(item) {
  if (isNumber(item.id) && item.id !== 0) {
    return true;
  }
  invalidEntries++;
  return false;
}

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

 


 

배열 내용 검색

배열 내용을 조건에 따라 검색하기 위해 filter() 를 사용

var 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']

 


 

참고자료 👇

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

 

Array.prototype.filter() - JavaScript | MDN

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive exampl

developer.mozilla.org

반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

rel="noreferrer noopener"를 쓰는 이유  (0) 2021.04.09
ES6의 const와 let  (0) 2021.03.08
화살표 함수  (0) 2021.02.10
07.23(정규표현식)  (0) 2020.07.23
07.22(이벤트)  (0) 2020.07.22
복사했습니다!