[JQUERY] 배열을 사용하여 두 배열을 하나로 합치기

배열을 사용하여 두 배열을 하나로 합치기

javascript배열을 사용하여 두 배열을 하나로 합치기

1. 샘플예제

첫번째 배열

45

10

3

1

두번째 배열

22

7

합친 배열

- 결과 : 

2. 소스코드

<%----javascript start-----------------------------------------------------%>

<script type="text/javascript">

var arr1 = [45, 10, 3, 1];

var arr2 = [22, 7];

$(document).ready(function(){

$.each( arr1, function( index, value ){

$( "#FirstList" ).append( $("<li>" + value + "</li>") );

});

$.each( arr2, function( index, value ){

$( "#SecondList" ).append( $("<li>" + value + "</li>") );

});

});

//==================================================

// function Name : uf_ListMake()

// Desc          : 특정 id의 엘리먼트에 배열을 사용하여 추가하기

// input         : 없음

// output        : 없음

//==================================================

function uf_MakeArray(){

var arrMembers = arr1.concat(arr2);

$.each( arrMembers, function( index, value ){

$( "#FinalList" ).append( $("<li>" + value + "</li>") );

});

}

//==================================================

// function Name : uf_DelList()

// Desc          : 특정 id의 엘리먼트를 삭제한다.

// input         : 없음

// output        : 없음

//==================================================

function uf_DelArray(){

$( "#FinalList" ).html("");

}

</script>

<%----javascript end-----------------------------------------------------%>

<%----HTML start---------------------------------------------------------%>

<h2>첫번째 벼열</h2>

<p id="FirstList"></p>

<br/>

<h2>두번째 배열</h2>

<p id="SecondList"></p>

<br/>

<h2>합친 배열</h2>

<p id="FinalList"></p>

<br/>

<button id="click_01" class="button button1" onclick="uf_MakeArray()">배열 합차기</button>

<button id="click_02" class="button button3" onclick="uf_DelArray()">배열값 삭제</button>

<%----HTML end-----------------------------------------------------------%>

3. 설명

javascript배열을 사용하여 숫자들의 배열을 전역변수로 저장한다.

id="FirstList"인 p 태크의 엘리먼트에 첫번째 배열의 모든 원소를 추가한다.

id="SecondList"인 p 태크의 엘리먼트에 두번째 배열의 모든 원소를 추가한다.

concat() 메소드를 사용하여 첫번째 배열과 두번째 배열을 합친다.

id="FinalList"인 p 태크의 엘리먼트에 두배열을 합친 결과를 추가한다.

- concat()

 : 배열 객체의 메소드로 뒷배열에 합치고 싶은 파라미터를 전달하면 두 배열이 합쳐진 배열을 반환한다.