반응형
- JAVASCRIPT filter 사용법 -
자바스크립트의 filter 메서드는 조건을 주고 해당 조건이 참인 요소를 모아 새로운 배열로 반환하는 메서드이다.
배열에서 원하는 데이터만 추출 하고 싶을 때 자주 사용하는 사용성이 좋은 메서드이다.
여기서 잘 기억하고 있어야 하는 부분은 새로운 배열을 반환해준다는 점이다.
또한 filter는 중복값을 제거해주지 않는다. 따라서 중복값이 나올 수 있다.
기본 구문
arr.filter(callback(element[, index[, array]])[, thisArg])
callback : 각 요소에 대한 조건값
element : 처리할 현재 요소
index : 현재 인덱스
array : filter를 호출한 배열
thisArg : callback을 생행 할 때 this로 사용하는 값
위와 같은 인자 값을 받는데 보통 아래와 같은 형태로 많이 쓴다. ( =>는 지원이 안 되는 브라우저도 있어서 function(){}을 사용하는 게 좋다.)
사용방법 3가지 예시
list.filter(function(word){
return word.length >= 6 ;
})
// 혹은 ---------------------------------------
list.filter(word => word.length >= 6);
// 혹은 ---------------------------------------
function filterCallbackFunction(word){
return word.length >= 6;
};
list.filter(filterCallbackFunction);
일반 배열 사용법
let list = ["apple","persimmon","mandarin","strawberry","lemon","melon","banana","pear","peach", "persimmon"];
let result = list.filter(word => word.length >= 6);
// 글자수가 6자 이상이면 새로운 배열에 요소로 들어간다.
console.log(result);
// ["persimmon", "mandarin", "strawberry", "banana"]
중복 제거가 필요하다면 Set을 사용하면 편하다.
new Set(result);
// {"persimmon", "mandarin", "strawberry", "banana"}
JSON 배열 사용법
let jsonData = [
{"name" : "apple"},
{"name" : "persimmon"},
{"name" : "mandarin"},
{"name" : "strawberry"},
{"name" : "lemon"},
{"name" : "melon"},
{"name" : "banana"},
{"name" : "pear"},
{"name" : "peach"},
{"name" : "persimmon"}
]
let result3 = jsonData.filter(function(word){
return word.name.length >= 6 ;
})
console.log(result3);
// [
// { "name": "persimmon" },
// { "name": "mandarin" },
// { "name": "strawberry" },
// { "name": "banana" }
// { "name": "persimmon"}
// ]
중복 제거가 필요하다면 중복의 기준이 상황에 따라 다르기에 메소드를 따로 만들어서 사용해야 한다. ( ex ) name 이 기준? age가 기준? 모든 값이 같을때? 등등 상황이 다름)
반응형