[JAVASCRIPT] Object 배열(Array)에서 특정 값 찾기, 중복 제거(Distinct) 하기 - Filter 사용법 (Array.prototype.filter())

 

Javascript를 사용하면서 데이터를 핸들링할 때, 가장 많이 사용했던 함수 Filter에 대해 다룹니다.

구성요소가 Object타입으로 구성된 Array를 다룰 때 유용합니다.

더불어, String 값으로 구성된 Array에서의 Filter를 이용한 Distinct 기법을 소개합니다.

1. 문법

"배열객체명".filter( function( "배열원소명" )  { return [조건]  } );

- "배열원소명" : 사용자 지정가 지정하는 변수명이며, function(){}의 "조건" 부에서 활용하여 사용합니다. 이 값은 배열객체의 각각의 원소에 해당합니다.

2. 예제

다음 예제는 "DataList" 배열객체에서 TYPE이 "A"인 배열원소만들 추출하는 사용법입니다.

var DataList = [];

DataList.push({
	SEQNO : "0",
	NAME : "Hong",
	VALUE : "100",
	TYPE : "A"
});

DataList.push({
	SEQNO : "1",
	NAME : "Kim",
	VALUE : "200",
	TYPE : "A"
});

DataList.push({
	SEQNO : "2",
	NAME : "Lee",
	VALUE : "1100",
	TYPE : "B"
});

DataList.push({
	SEQNO : "3",
	NAME : "Park",
	VALUE : "100",
	TYPE : "C"
});

DataList.push({
	SEQNO : "0",
	NAME : "Hong",
	VALUE : "100",
	TYPE : "A"
});

console.log("DataList Example :: ");
console.log(DataList);

console.log("DataList Distinct Example :: ");
console.log(DataList.filter(function(rowData){ return rowData.TYPE == "A"}));

3. 결과

총 5개의 배열원소 중 TYPE이 "A"인 3개의 원소만 추출된 것을 볼 수 있습니다.

4. Filter를 이용한 Distinct (중복제거)

예제와 같이 "Distinct" 함수를 정의한 후 Filter의 function(){} 위치에서 호출합니다.

 - Array<String>과 같은 포맷에서 적용됩니다. 

(위에서 봤던 Array<Object> 포맷에서의 Distinct는 다음 포스팅에서 다루겠습니다.😅)

function Distinct(value, index, self) {
	return self.indexOf(value) === index;
}

var sample = [];

sample.push("A");
sample.push("B");
sample.push("C");
sample.push("A");
sample.push("A");

console.log("Sample Example :: " + sample);
console.log("Sample Example :: " + sample.filter(Distinct));

✻ 결과 (중복제거)

Filter Distinct의 출처 및 참고자료는 여기 클릭