javascript - 배열 교집합(중복), 차집합 요소 구하기

 

사용법

서로 다른 배열을 비교하여 교집합(중복), 차집합(한쪽에만 존재), 대칭차집합(교집합 외)인 요소를 구하는 방법.

<script>
const arr1 = ['1','2','3','4'];
const arr2 = ['3','4','5','6'];

// 교집합
console.log( arr1.filter(x => arr2.includes(x)) );
// ['3', '4']

// 차집합
console.log( arr1.filter(x => !arr2.includes(x)) );
// ['1', '2']

// 대칭차집합
console.log( arr1.filter(x => !arr2.includes(x)).concat(arr2.filter(x => !arr1.includes(x))) );
// ['1', '2', '5', '6']
</script>

 

사용 예

goods_active.html

{ "goodsNo" : [ "462", "727", "724", "1556" ] }

 

위 파일로부터 표시할 엘리먼트 리스트(id)를 받아와서, 대상이 아닌 엘리먼트는 제거한다.

 

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {

	$.get("goods_active.html", function(data) {

		const obj = JSON.parse(data);

		let goodsDisplayed = new Array();
		
		$(".timeSaleGoods").each( (idx, el) => goodsDisplayed.push( $(el).attr("id") ) );

		let goodsExpired = goodsDisplayed.filter(x => !obj['goodsNo'].includes(x));
		goodsExpired.forEach( el => $("#" + el).remove() );

	});

})
</script>
<ul>
	<li class="timeSaleGoods" id="18">18</li>
	<li class="timeSaleGoods" id="366">366</li>
	<li class="timeSaleGoods" id="462">462</li>
	<li class="timeSaleGoods" id="727">727</li>
	<li class="timeSaleGoods" id="724">724</li>
	<li class="timeSaleGoods" id="1556">1556</li>
</ul>

 

메서드

LINK

Array.prototype.filter()

LINK

Array.prototype.includes()

LINK

Array.prototype.concat()