Javascript

JavaScript 자바스크립트 배열 Array .filter() 란? 사용법

알로호모라 2021. 5. 21. 09:15
반응형

 

JavaScript 

Array.prototype.filter()

 

.filter()

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

- .filter()는 호출되는 배열을 변화(mutate)시키지 않는다. 

- 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해 callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성 

- callback 은 할당된 값이 있는 배열의 인덱스에 대해서만 호출된다. 

- 삭제되었거나 값이 할당된 적 없는 인덱스에 대해서는 호출하지 않는다. 

- callback 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함하지 않는다. 

- filter()호출 시작 이후 배열에 추가된 요소는 callback에 의해 방문되지 않는다. 배열의 기존 요소 변경 or 삭제 경우 callback에 전달된 그 값은 filter()가 그 요소를 방문한 시점에 값이 된다. 삭제된 요소는 반영되지 않는다. 

 

 

 

 

기본 구문  

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

 

 

 

 

매개 변수  

1. callback : 각 요소를 시험할 함수 

true를 반환하면 요소를 유지하고 false를 반환하면 버림. 다음 세가지 매개변수를 받음 

 

 - element : 처리할 현재 요소 

 - index (Optional) : 요소 인덱스 

 - array (Optional) : 순회 (traverse)되는 배열 객체 

*tra·verse

1.가로지르다, 횡단하다

2.횡단; 횡단 지역

 

2. thisArg (Optional) 

 

 

 

 

 

반환 값  

테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환. 

 

 

 

 

 

예제1   

 

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

let Thanks = [12,5,8,130,44,55].filter(GoodDay);

console.log(Thanks);

 

thanks 라는 변수에 [12,5,8,130,44,55]배열에 filter 를 했다. 

filter (callback함수 = GoodDay) 를 한 값은 10과 같거나 이상인 요소를 다시 배열로 넣는 함수 

 

배열의 첫번째 (0) 부터 여섯째 자리(5) 까지 하나씩 for 구문처럼 돌리며 요소를 대입, 함수와 일치하는 것은 배열로 return 

 

 

 

 

 

예제2 

String에서 sting 의 인덱스 찾기 

console.log(filterItems('ap'));

console.log('apple'.indexOf('ap')); // 0
console.log('grapes'.indexOf('ap')); //2
console.log('grapes'.indexOf('apa')); // -1

// 'ap'가 해당 문자열에 존재하면 맨 처음 자리값을 반환. 
// 'ap'로 찾으면 'a' 값만 찾는게 아닌 'ap' 값을 같이 찾아야함.

String.indexOf('ap') 를 하면 

'ap' 가 있는지 확인, 있으면 첫 시작 자리값을 반환. 

'a' or 'p' 만 있으면 x 

 

 

 

예제 3

fruits 배열에서 'ng' 들어간 요소를 새로운 배열로 담기 

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

function filterItems(query){
    return fruits.filter((el)=>{
        return el.toLowerCase().indexOf(query.toLowerCase())>-1;
    })
}

console.log(filterItems('ng'));

(위 = 익명함수 사용 / 아래 일반 함수 ) 

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

function filterItems(query){
    return fruits.filter(function(el){     // return 이 빠지면 안된다. 
        return el.toLowerCase().indexOf(query.toLowerCase())>-1;  // 여기도 return 必
    })
}

console.log(filterItems('ng'));

toLowerCase()는 소문자로 만드는String 함수 <-> toUpperCase()

filter를 한다. callback함수로는 el = 배열 안에있는 각각의 요소에 toLowerCase()로 소문자로 모두 만들어 이 안에 인자값 'ng'(toLowerCased) 의 index  자리를 찾는다. 해당 el 요소에 ng가 있다면 해당 return 값은 0부터 ~ 요소의 length-1 까지 이다. 그러므로 return 된 값이 -1 보다 크다면  == 즉, 해당 배열의 el 요소 안에 인자값 'ng'가 있다면 해당 요소를 새로운 배열로 만들어 return 한다. 

 

 

 

 

 

예제 4

프로그래머스 JS 코딩테스트 level 1 문자열 내 p와 y의 개수 

문자열 s 에 p & P 의 개수, y & Y의 개수 가 같으면 true 틀리면 false 문제

function solution(s){
    let p = Array.from(s).filter(ele=>ele=='p'|| ele=='P');
    let y = Array.from(s).filter(ele=>ele=='y'|| ele=='Y');
    return p.length==y.length ? true : false;
}

 

 

 

 

반응형