filter 메소드 배열 필터하기

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"]

여기서 word는 배열 요소 하나하나를 뜻한다.

 

syntax

    arr.filter(callback(element[, index[, array]])[, thisArg])

callback

각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.

callback 세 가지 매개변수를 받습니다.

 

element  : 처리할 현재 요소.

index  : 처리할 현재 요소의 인덱스.

array : filter를 호출한 배열.

thisArg  : callback을 실행할 때 this로 사용하는 값.

 

반환값 

테스트를 통과한 요소로 이루어진 새로운 배열.

어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

 

설명

filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, 

callback이 true면 모든 값이 있는 새로운 배열을 생성합니다.

 

 

예시

작은값 걸러내기

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

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

 

배열 내용 검색

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

query 검색할 단어를 인자로 받아 

el은 fruits 배열의 하나하나의 요소이다.

콜백함수 인자가 true를 반환하면 필터된 새로운 배열을 생성!

 

 

화살표함수로 표현

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

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

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

 

filter 메소드를 사용해보자!

/**
 * 검색하려는 조건, 검색어를 매개변수로 받아서 사원 정보를 객체 배열로 반환 
 * @param {string} dropdownkey 검색 조건
 * @param {string} keyword 검색어
 * @returns Array[]
 * @example memberSearch('name','길동'); = [ { name:"홍길동", position:"사원", phone:"010-1111-2222"} ]
 * @method filter(콜백함수){조건} 선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택합니다.
 * @method index(keyword) keyword와 맞는 인덱스를 반환한다.
 * @method Object.values(member) 객체의 값을 배열객체로 반환한다.
*/
const memberSearch = (dropdownkey, keyword) => {
    
    // dropdownkey가 all이고 검색어가 존재하지 않을시에 사원 정보 배열을 돌려준다.
    if (dropdownkey==='all' && !keyword) return [...peopleArr];
    
    // dropdownkey가 all 아니고 검색어가 존재하지 않을시에 사원 정보 배열을 돌려준다.
    else if (dropdownkey!=='all' && !keyword) return [];

    //dropdownkey가 all이고 검색어가 존재할 때 필터를 한다.
    else if(dropdownkey ==='all' && keyword.length > 0)
     return [...peopleArr].filter((member)=>{
        return Object.values(member).indexOf(keyword) > -1;
    });

    // 항목을 지정해서 검색할 때 검색어가 존재할때 필터를 한다.
    /**@type {object} member 배열 하나하나의 요소 */
    return [...peopleArr].filter((member)=>{
      
        // 멤버가 가진 정보가 number 타입일 경우 문자열로 변경
        /**@type {string} memberInfo 속성에 대한 value 값 추출 */
        var memberInfo = (typeof member[dropdownkey] === 'number') ? member[dropdownkey] + '' : member[dropdownkey];
       
        // 소문자로 치환한 뒤 String.prototype.indexOf()로 존재하는지 검사 / 존재한다면 새 배열에 담는다.
        return memberInfo.indexOf(keyword) > -1;
    });
}

/**
 * 테이블이 로우를 생성해주는 함수
 * @type {function} updateRow 
 * @param {Array} members 사원정보 배열
 * @returns 파라미터가 존재하지 않을 경우 빈 화면을 그려준다. / 반대로 존재할 경우 서치한 배열 정보를 테이블 로우로 생성
 * @event table body 에 <td> node 생성
 * @example updateRow(Members);
 * @method appendChild() 접근한 요소 객체 뒤로 html 요소를 추가
 * 
 */
const updateRow = (members) => {
    
    // 파라미터가 존재하지 않을시
    if(members.length === 0) return document.getElementById('tablebody').innerHTML = '검색 결과가 없습니다.';

    
    // 파라미터가 존재 할 시 
    
    // 테이블 row를 빈화면으로 초기화
    document.getElementById('tablebody').innerHTML = '';

    //forEach 메소드로 배열을 반복한다.
    /**@type {object} item 서치한 사원 정보 배열 */
    members.forEach((item)=>{
        let table = document.getElementById('tablebody');
        let tr = document.createElement('tr');
        table.appendChild(tr);
    
    // for ~ in 반복문을 통해 item 안의 property 즉 key를 반복한다.
    /**@type {string} property item 배열 요소안의 object key값 */ 
        for (const property in item) {
            let td = document.createElement('td');
            td.innerText = item[property];
            tr.appendChild(td);
        }
    })
}

내가 만든 예제 중 filter 메소드를 만들어 적용해 보았다.

쓰여지는 형태와 각각의 인자들을 참고하면 좋을 것 같다.

 

참고사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter