Array를 다루는 중 여러 메소드를 접했다. 이번에는 그 중 filter라는 메소드에 대해 살펴본다.
filter()
👉🏻 문법
arr.filter(callback(element[, index[, array]])[, thisArg])filter()는 조건을 주고 callback함수를 통해 해당 조건이 참인 요소를 모아 새로운 배열로 반환하는 메서드이다.
기존 배열은 건드리지 않으면서 요소들을 순회하며 조건문을 만족한 요소들을 반환하며 중복값은 제거하지 않는다.
🐥 Example
1) 일반 배열
const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);
console.log(result); // [4, 5]numbers 배열을 filter를 통해 3보다 큰 수를 가진 값들을 걸러낸다.
for문을 사용하는 방법도 있지만 map, filter, reduce와 같은 함수는 기본적으로 순차적으로 요소에 접근하는 개념을 내포하고 있기 때문에 굳이 for문이 가진 순회를 별다른 코드로 작성하지 않고도 사용할 수 있다!
🐸 응용
2) 객체 배열
let jsonData = [
{"name" : "apple"},
{"name" : "persimmon"},
{"name" : "mandarin"},
{"name" : "strawberry"},
{"name" : "lemon"},
{"name" : "melon"},
{"name" : "banana"},
{"name" : "pear"},
{"name" : "peach"},
{"name" : "persimmon"}
]
let result2 = jsonData.filter(function(word){
return word.name.length >= 6 ;
})
console.log(result3);
// [
// { "name": "persimmon" },
// { "name": "mandarin" },
// { "name": "strawberry" },
// { "name": "banana" }
// { "name": "persimmon"}
// ]3) 배열 내용 검색
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']4) 객체 두개의 배열 비교 후 병합
- 두개의 서로 다른 객체 배열을 비교하고 특정 속성 값이 일치하는 경우 두 객체를 병합하는 방법이다.
let arr1 = [
{ id: "50", active: "a", value: 10 },
{ id: "51", active: "a", value: 11 }
];
let arr2 = [
{ id: "50", active: "a", value: 10 },
{ id: "51", active: "a", value: 11 },
{ id: "52", active: "a", value: 13 }
];const arr1IDs = new Set(arr1.map(({ id }) => id)); //중복 제거(Set)
const combined = [...arr1, ...arr2.filter(({ id }) => !arr1IDs.has(id))];
console.log(JSON.stringify(combined));
//[{"id":"50","active":"a","value":10},{"id":"51","active":"a","value":11},{"id":"52","active":"a","value":13}]Ref
👩🚀 No worries! Just record